【问题标题】: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'类添加到&lt;td&gt;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 但是这个签名会发送给谷歌客户端,它会删除任何
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-03-02
  • 2018-11-15
  • 1970-01-01
  • 1970-01-01
  • 2015-09-04
  • 2017-06-19
  • 2012-12-09
相关资源
最近更新 更多