HTML電子郵件：使它在Outlook和手機上均可工作

我正在爲html電子郵件寫一個模板（上帝對我的靈魂有憐憫）。設計看起來很簡單 - 有這樣的一些文字和圖像的中心對齊塊：HTML電子郵件：使它在Outlook和手機上均可工作

沒有什麼太花哨，沒有多列布局或任何東西，然而，我堅持。這是什麼給我的問題：

在桌面屏幕上，中央塊應該是480px寬。
在手機上，在縱向（也就是小於480像素）時，中央塊應採取屏幕的整個寬度

所以我的辦法解決這個問題（從借來/其他模板啓發）被創建一個表，100％的寬度，與另一個表裏面，也100％的寬度，以及480像素一個最大寬度，像這樣：

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;"> 
    <tr> 
    <td align="center"> 
     <table border="0" cellpadding="0" cellspacing="0" width="100%" style="width: 100%; max-width: 480px;"> 
     <tr> 
      <td> 
       Some blah 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table>

它適用於移動。它適用於瀏覽器客戶端。它適用於Thunderbird。它適用於Apple Mail。它讓我微笑。但是，當然，Outlook不能做到最大寬度，所以它將中心區域炸成100％寬度。

那麼，如何修改我的代碼，使這個設計也能正常工作在那個可憎的是Outlook？

編輯：這就是我正在在縱向手機屏幕時，我只設置內部表格的寬度480像素：

來源

2016-04-08 azangru

爲什麼不製作一個在Outlook中工作，然後使用其他媒體查詢？ – mplungjan

由於Gmail拋棄了'head'的樣式，並且您無法進行內聯媒體查詢？ :-) – azangru

也許你可以使用this trick from elidickinson：

<!--[if mso]> 
<center> 
<table><tr><td width="480"> 
<![endif]--> 
<div style="max-width:480px; margin:0 auto;"> 
    ... 
</div> 
<!--[if mso]> 
</td></tr></table> 
</center> 
<![endif]-->

來源

2016-04-08 17:12:08 Quantastical

'看起來很有前途！我會嘗試。 – azangru

必須測試你現在才建議的技巧，它的工作。只有我把你的解決方案中的'div'改爲'table'來保持我的初始格式。 – azangru

我可以建議你做這樣的

<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
    <tr> 
    <td align="center"> 
     <table bgcolor="#f00" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td width="480"> 
       Some blah 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table>

來源

2016-04-08 17:10:30 LGSon

我開始使用這種方法。但是，它在縱向模式下給手機帶來了問題，因爲內部表格變得比屏幕寬度更寬。 – azangru

我更新了我的問題以說明問題所在。 – azangru

@azangru更新了一個替代方案，其中您將寬度添加到單元格，而不是像這樣'' – LGSon

HTML電子郵件：使它在Outlook和手機上均可工作

回答

相關問題