更改移動設備上的電子郵件標題圖像

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

就兼容性而言，第三個選項絕對是最好的。這是你的選擇嗎？