Question

我正在设计一封电子邮件，我在Android和iPhone中遇到了gmail应用自动调整功能的问题。

该电子邮件在其他客户端表现良好。

为防止自动，我到目前为止已尝试过：

在table / wrapper上设置max-width和min-width

像这样添加元视口：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

这些都不起作用。

你有什么想法吗？

Answer 1

我遇到了同样的问题。我添加了min-width，不仅是表格，还包括列（td）标签。这似乎覆盖了Gmail的自动适配功能。

以下是我如何实现这一点的示例。我从这个论坛找到了答案：https://www.emailonacid.com/forum/viewthread/566/#827

<table width="590" height="900" border="0" cellpadding="0" cellspacing="0" style="margin:0 auto; min-width:590px;">
  <tr>
    <td style="font-size: 1px; line-height: 1%; mso-line-height-rule: exactly; min-width:295px;">
      <a href="#">
        <img style="display:block;border:0px;line-height:50%;" src="example.jpg" width="295" height="900" alt="">
      </a>
    </td>
    <td style="font-size: 1px; line-height: 1%; mso-line-height-rule: exactly; min-width:295px;">
      <a href="#">
        <img style="display:block;border:0px;line-height:50%;" src="example.jpg" width="295" height="900" alt="">
      </a>
    </td>
  </tr>
</table>

如您所见，我将表格设置为最小宽度为590px;每列（td）的最小宽度为295px。与图像尺寸相同。

Answer 2

此刻我正在努力解决这个问题，我打算接下来要测试的是，正在采用“移动优先”的方式来设计电子邮件。我将设计宽度为320-480px的电子邮件，并使用媒体查询为桌面客户端制作更大的电子邮件，而不是设计为600px宽并使其更小。我希望这会使电子邮件在不支持媒体查询的GMail应用程序中看起来很棒。

我刚刚听说过两个看似相当不错的资源，请查看：

lit.ms/KISSresources和www.responsiveemailresources.com

Autofit gmail应用程序，电子邮件设计

2 个答案: