更改移动设备上的电子邮件标题图像

Question

我已经使用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]> 
 

 

感谢您的支持

Answer 1

我会说有三个选项的位置：

1. 有两个图像在你的HTML中，并根据设备的不同，只显示正确的一个sed，使用媒体查询（特别依赖于display属性，以及Outlook的条件注释）
2. 将您的桌面图像标记img包装在span中。在移动设备上，您将使用媒体查询来隐藏此桌面图片，并使用background-url属性为span标记添加背景图片，该属性将“替换”您隐藏的桌面图片
3. 您的图片标签只有一个HTML，指向一个图像服务器上托管的，并根据所打开电子邮件中的设备上（使用的User-Agent）

不幸的是，也有缺点与所有那些送回到正确的图像：

1. 当显示在移动设备上的移动内容仅是完全可行的，隐藏内容是棘手的，可能无法正常工作，所以你最终可能会显示两个图像。此外，媒体查询在任何地方都不受支持。
2. 背景图片并非所有电子邮件客户端的支持，所以它不会工作无处不在。同样，媒体查询不到处支持。
3. 您需要处理脚本。然而，这应该不会太难使用一个包如https://www.npmjs.com/package/ua-parser

就兼容性而言，第三个选项绝对是最好的。这是你的选择吗？