0

我用 mjml 框架做了一个时事通讯。我必须更改移动设备上的标题图像，但是如何更改？该框架对于制作防弹通讯非常有帮助，但不支持不同视口的不同图像。

这是标题代码：

              <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="900" align="center" style="width:900px;">
                <tr>
                  <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
              <![endif]-->
    <div style="margin:0px auto;max-width:900px;background:#29c5f8;">
      <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#29c5f8;" align="center" border="0">
        <tbody>
          <tr>
            <td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:0px;padding-top:0px;">
              <!--[if mso | IE]>
              <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:900px;">
              <![endif]-->
              <div class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                <table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
                  <tbody>
                    <tr>
                      <td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;" align="center">
                        <table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0">
                          <tbody>
                            <tr>
                              <td style="width:900px;">
                                <a href="http://www.link.com" target="_blank">
                                  <img alt="" title="" height="auto" src="http://www.link.com/img/img-desktop.png" style="border:none;border-radius:;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="900">
                                </a>
                              </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]-->
    <!--[if mso | IE]>

谢谢你的支持

4

2 回答 2

0

我想说这里有三个选项：

  1. 在您的 HTML 中包含两个图像并根据使用的设备仅显示正确的一个，使用媒体查询（尤其依赖于display属性，加上 Outlook 的条件注释）
  2. 将您的桌面图像标签包装img在span. 在移动设备上，您将使用媒体查询隐藏此桌面图像并span使用属性将背景图像添加到标签中background-url，这将“替换”您隐藏的桌面图像
  3. 在您的 HTML 中只有一个图像标签，指向托管在服务器上的图像并根据打开电子邮件的设备发回正确的图像（使用用户代理）

不幸的是，所有这些都有缺点：

  1. 虽然仅在移动设备上显示移动内容是完全可行的，但隐藏内容更加棘手并且可能不起作用，因此您最终可能会同时显示两个图像。此外，并非所有地方都支持媒体查询。
  2. 并非所有电子邮件客户端都支持背景图像，因此它不会在任何地方都有效。同样，并非所有地方都支持媒体查询。
  3. 您需要编写脚本。但是，使用https://www.npmjs.com/package/ua-parser之类的包应该不会太难

在兼容性方面，第三种选择绝对是最好的选择。它是您的选择吗？

于 2017-01-31T09:59:36.870 回答
0

MJML 文档允许使用属性 srcset 根据 mj-images 的视口更改图像。

srcset url & width 可以根据视口设置不同的图像源

但是在我的测试中，我一直无法让它们工作。

我建议使用媒体查询和 CSS 类。

于 2018-11-22T10:14:35.263 回答