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

【问题标题】：Autofit gmail app, Email designAutofit gmail 应用程序，电子邮件设计
【发布时间】：2013-12-19 18:09:05
【问题描述】：

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

该电子邮件在其他客户端中运行良好。

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

在表格/包装器上设置最大宽度和最小宽度

像这样添加元视口：

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

这些都不起作用。

你有什么想法吗？

【问题讨论】：

标签： android css email gmail

【解决方案1】：

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

刚刚听说有两个资源看起来还不错，看看：

lit.ms/KISSresources 和 www.responsiveemailresources.com

【讨论】：

【解决方案2】：

我遇到了同样的问题。我不仅向表格添加了 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。与图片大小相同。

【讨论】：

哦，好的，谢谢您的帮助！我现在会考虑到这一点来改进我的评论。