響應電子郵件不能在iPhone上工作

我是新的響應式設計，所以我提前道歉。我正在接收當前的電子郵件，並將其中的一部分作爲響應。我有一個3列的電子郵件，並希望它堆疊到一列，並使文本更大。我通過瀏覽器獲得了成功的結果，但是一旦我在iPhone 5上查看它，我什麼也得不到。我已發送到AOL，Gmail和Outlook帳戶，而且沒有任何反應。我在下面列出了我的風格。再次，我對整個媒體查詢是新手，所以如果看起來很荒謬，我表示抱歉。響應電子郵件不能在iPhone上工作

<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<style type="text/css"> 
    @media only screen and (max-width: 660px) { 
    table.container {width: 100% !important; padding:0 4px;}  
      table.container { 
     text-align: center !important; 
     font-size:20px !important; 
    } 

    .templateColumnContainer{ 
     display:block !important; 
     width:100% !important; 
    } 
} 

@media only screen and (max-width: 568px) { 

    table.container {width: 100% !important; padding:0 4px;}  
    table.container { 
     text-align: center !important; 
     font-size:20px !important; 
    } 

    .templateColumnContainer { 
     display:block !important; 
     width:100% !important; 
    } 
} 
    @media only screen and (max-width: 480px) { 

    table.container {width: 100% !important; padding:0 4px;}  
    table.container { 
     text-align: center !important; 
     font-size:20px !important; 
    } 

    .templateColumnContainer { 
     display:block !important; 
     width:100% !important; 
    } 
} 

@media only screen and (max-width: 320px) { 

    table.container {width: 280px !important; padding:0 4px;} 
    table.container { 
     text-align: center !important; 
     font-size:20px !important; 
    } 

    .templateColumnContainer { 
     display:block !important; 
     width:100% !important; 
    } 
} 


      </style> 
     </head>

來源

2014-02-05 user3277150

的Gmail，AOL和Outlook.com所有do not support媒體查詢。嘗試將它發送到iPhone上的默認郵件閱讀器。

來源

2014-02-05 23:12:39 John

改變流體設計是明智的。 1.創建100％寬度的包裝表。 2.嵌套寬度爲100％的容器表，但有一個表格單元格，寬度和最大寬度可以保存郵件設計寬度。一定要在這個TD上放置一個align =中心。

在這個容器表裏，你開始建立你的郵件。使用對齊屬性來創建元素以在視口更改後移動。

實際上，您可以對某些移動設備使用媒體查詢。放在頭上，您可以使用基於視口更改的媒體查詢。

來源

2014-02-18 09:53:52

最好的辦法讓你的電子郵件響應：添加METAS：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> 
<meta name="x-apple-disable-message-reformatting" />

如果你需要爲Outlook sans-serif字體，把這個一中和頭部：

<!--[if mso]> 
<style type="text/css"> 
    h1, h2, h3, h4, h5, h6, p, a, span, td, em, strong { 
     font-family: Helvetica, Arial, sans-serif; 
    } 
</style> 
<![endif]-->

製作基於表格的設計。

<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;margin:0 auto;"> 
<tbody> 
<tr> 
    <td valign="middle" align="center"> 
     <table class="fullwidth" width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="borde-r-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;margin: 0;padding: 0;margin:0 auto;"> 
      <tbody> 
      <tr> 
       <td style="font-size:5px;line-height:5px; height: 10px">&nbsp;</td> <!-- paddign & margin not supported by Outlook --> 
      </tr> 
      <tr> 
       <td valign="middle" align="center"> 
        <!-- Add fun here --> 
       </td> 
      </tr> 
      <tr> 
       <td style="font-size:5px;line-height:5px; height: 10px">&nbsp;</td> 
      </tr> 
      </tbody> 
     </table> 
    </td> 
</tr> 
</tbody>

添加fullwidth類的需要，以適應全尺寸的介質querie（480例）表：

@media only screen and (max-width: 480px){ 
    .fullwidth, 
    .fullwidth tbody, 
    .fullwidth tbody > tr, 
    .fullwidth tbody > tr > td, 
    .fullwidth tbody > tr > th, 
    table[class=fullwidth], 
    table[class=fullwidth] tbody, 
    table[class=fullwidth] tbody > tr, 
    table[class=fullwidth] tbody > tr > td, 
    table[class=fullwidth] tbody > tr > th 
    td[class=main-border] { 
     max-width: 100% !important; 
     min-width: 100% !important; 
     width: 100% !important; 
     display: block !important; 
     clear: both; 

     margin: 0 auto !important; 
    } 
}

圖片SRC必須是絕對地址使用HTTPS（谷歌代理）

來源

2017-10-05 06:26:14

我建議採用流體混合方法。使用max-width的嵌套表列以及支持它們的客戶端的媒體查詢。

構建適用於所有客戶的基本骨架。在Email on Acid上創建了一個漂亮的模板，可以在多個設備上實現無縫工作（這很可怕，這個模板效果非常好）。多年來它一直作爲一種樣板文件服務於我，多年來爲改進對HTML電子郵件支持的支持而進行了小幅調整。下載它here。他們已經採用流體混合方法，對錶格列使用max-width。
Outlook不支持max-width，因此您需要使用Outlook的條件。閱讀關於它here。我上面提到的模板鏈接爲它編寫了條件。
爲支持它們的電子郵件客戶端編寫媒體查詢。參考他們here。

來源

2018-01-03 11:36:34

響應電子郵件不能在iPhone上工作

回答

相關問題