响应式电子邮件签名在 iPhone 上不起作用答案

【问题标题】：Responsive email signature doesn't work on iPhone响应式电子邮件签名在 iPhone 上不起作用
【发布时间】：2020-12-07 11:50:36
【问题描述】：

我用表格做了一个布局。设计是第一行 2 列，第二行 3 列。当屏幕宽度低于 600 像素时，<td> 会换行，因为我将其设置为内联块。问题是一切都在 web、android、mac 上运行良好，但 ios 设备的布局就像在桌面上一样

代码：https://jsfiddle.net/jcp2hz7v/1/ 链接被故意破坏。

【问题讨论】：

请发布您的代码，否则我们只能指出在 Google 上很容易找到的一般答案

标签： html ios html-email

【解决方案1】：

您可以做的是添加一个@media 查询，以便在 600 像素以下，相关的<td>s 设置为 max-width:100%。这样，他们将覆盖整条生产线。事实上，它们只有在空间用完时才会移动到下一行 - 而且有些 iPhone 非常大！

将此添加到头部（这适用于手机，仅 Gmail IMAP 除外）：

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

将'mobile'类添加到<td>s的第二行

您的代码在 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]-->

【讨论】：

Thanx 但是这个签名会发送给谷歌客户端，它会删除任何