MJML 列无法在移动设备上堆叠？

问题描述 投票：0回答：1

我使用 mjml.io 的在线编辑器创建了一个非常基本的 2 列设计，但我无法使其在移动设备上堆叠。

使用下面的代码，电子邮件在桌面（PC 版 Outlook 365）和移动设备（iPhone 13 上的 iOS 版 Outlook）上看起来完全相同。这些列是并排的，所有内容都只是在移动设备上按比例缩小。

谁能指出我忘记了什么？

这是我使用的代码：

MJML

<mjml>
    <mj-head>
        <mj-attributes>
            <mj-all font-family="Calibri, Helvetica, Arial, sans-serif" />
            <mj-all font-size="16px" />
        </mj-attributes>
    </mj-head>
    <mj-body>
        <mj-section padding="0" background-color="#eeeeee">      
            <mj-column width="30%" padding="0" background-color="#ccffcc"><mj-text padding="10px">green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block</mj-text>
            </mj-column>
            <mj-column width="70%" padding="0" background-color="#ffcccc"><mj-text padding="10px">pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block </mj-text>
            </mj-column>
        </mj-section>       
    </mj-body>
</mjml>

HTML

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
  <title>
  </title>
  <!--[if !mso]><!-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--<![endif]-->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    #outlook a {
      padding: 0;
    }

    body {
      margin: 0;
      padding: 0;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }

    table,
    td {
      border-collapse: collapse;
      mso-table-lspace: 0pt;
      mso-table-rspace: 0pt;
    }

    img {
      border: 0;
      height: auto;
      line-height: 100%;
      outline: none;
      text-decoration: none;
      -ms-interpolation-mode: bicubic;
    }

    p {
      display: block;
      margin: 13px 0;
    }
  </style>
  <!--[if mso]>
        <noscript>
        <xml>
        <o:OfficeDocumentSettings>
          <o:AllowPNG/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
        </xml>
        </noscript>
        <![endif]-->
  <!--[if lte mso 11]>
        <style type="text/css">
          .mj-outlook-group-fix { width:100% !important; }
        </style>
        <![endif]-->
  <style type="text/css">
    @media only screen and (min-width:480px) {
      .mj-column-per-30 {
        width: 30% !important;
        max-width: 30%;
      }

      .mj-column-per-70 {
        width: 70% !important;
        max-width: 70%;
      }
    }
  </style>
  <style media="screen and (min-width:480px)">
    .moz-text-html .mj-column-per-30 {
      width: 30% !important;
      max-width: 30%;
    }

    .moz-text-html .mj-column-per-70 {
      width: 70% !important;
      max-width: 70%;
    }
  </style>
  <style type="text/css">
  </style>
</head>

<body style="word-spacing:normal;">
  <div style="">
    <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#eeeeee" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
    <div style="background:#eeeeee;background-color:#eeeeee;margin:0px auto;max-width:600px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#eeeeee;background-color:#eeeeee;width:100%;">
        <tbody>
          <tr>
            <td style="direction:ltr;font-size:0px;padding:0;text-align:center;">
              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:180px;" ><![endif]-->
              <div class="mj-column-per-30 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                  <tbody>
                    <tr>
                      <td style="background-color:#ccffcc;vertical-align:top;padding:0;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
                          <tbody>
                            <tr>
                              <td align="left" style="font-size:0px;padding:10px;word-break:break-word;">
                                <div style="font-family:Calibri, Helvetica, Arial, sans-serif;font-size:16px;line-height:1;text-align:left;color:#000000;">green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block</div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]></td><td class="" style="vertical-align:top;width:420px;" ><![endif]-->
              <div class="mj-column-per-70 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                  <tbody>
                    <tr>
                      <td style="background-color:#ffcccc;vertical-align:top;padding:0;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="" width="100%">
                          <tbody>
                            <tr>
                              <td align="left" style="font-size:0px;padding:10px;word-break:break-word;">
                                <div style="font-family:Calibri, Helvetica, Arial, sans-serif;font-size:16px;line-height:1;text-align:left;color:#000000;">pink block pink block pink block pink block pink block pink block pink block pink block pink blockpink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block</div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]></td></tr></table><![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]></td></tr></table><![endif]-->
  </div>
</body>

</html>
html outlook responsive-design html-email mjml
1个回答
0
投票

正如 @Nathan 所指出的，该问题与 Outlook 有关，而不是 MJML 或 HTML 代码。看来，即使从干净、空的消息开始并插入 HTML 文件，Outlook 仍然会添加一些阻止设计响应的内容。在 Thunderbird 中使用相同的代码可以在桌面和移动设备上完美运行。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.