響應式 email 簽名在 iPhone 上不起作用

Question

我用表格做了一個布局。 設計是第一行 2 列，第二行 3 列。 當屏幕寬度低於 600 像素時， <td>會換行，因為我將其設置為內聯塊。 問題是在 web、android、mac 上一切正常，但 ios 設備的布局類似於桌面

代碼： https://jsfiddle.net/jcp2hz7v/1/鏈接被故意破壞。

Answer 1

您可以做的是添加一個@media查詢，以便在 600px 以下相關的<td>設置為 max-width:100%。 這樣，他們將覆蓋整條生產線。 事實上，它們只有在空間用完時才會移動到下一行——而且有些 iPhone 非常大！

將此添加到頭部（這適用於手機，僅 Gmail IMAP 除外）：

<style type="text/css">
  @media screen and (max-width:600px) {
    td.mobile {max-width:100%!important;}
  }
</style>

將 'mobile' class 添加到<td>的第二行

您的代碼在 Outlook 上也不能正常工作，這不尊重max-width 。 你需要一個包裝器來確保它保持在 600px，即

<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px; min-width: 230px; width: 100%">
...
</table>
 <!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->