HTML邮件包含溢出固定宽度表格时viewport缩放失效如何解决

根因说明 #

移动端邮件客户端会自动扫描页面内所有元素的宽度，取最大宽度作为页面实际渲染宽度，当存在宽度大于设备视口的固定宽度表格时，会强制将整个页面缩放到匹配该表格宽度，导致普通文本被缩小。

修复步骤 #

1. 新增文本缩放限制规则 #

在邮件头部的style标签中添加全局规则，阻止客户端自动缩放文本：

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

如果邮件客户端过滤头部样式，直接将规则写在body标签的行内样式中即可。

2. 优化表格滚动容器样式 #

包裹固定宽度表格的div需要添加以下行内样式，强制容器宽度适配视口，不会被表格撑开导致整体页面宽度异常：

<div style="width: 100% !important; max-width: 100vw !important; min-width: 0; overflow-x: auto; overflow-y: hidden; display: block;">
  <!-- 你的固定宽度表格 -->
  <table width="800" cellpadding="0" cellspacing="0" border="0">
    <!-- 表格内容 -->
  </table>
</div>

3. 新增外层全局容器（可选，兼容性更高） #

在所有邮件内容最外层新增一个容器，限制整体页面最大宽度，避免被大宽度元素撑开：

<div style="width: 100%; max-width: 600px; margin: 0 auto;">
  <!-- 所有邮件内容，包括文本、表格滚动容器都放在这里 -->
</div>

兼容性优化注意事项 #

• 所有样式优先用行内样式编写，避免被邮件客户端过滤。
• 固定宽度表格不要设置min-width属性，仅用width属性声明固定值即可。
• 针对部分安卓端邮件客户端仍有文本缩小的情况，可以给所有文本元素添加font-size: 16px !important;的行内样式，强制基础字号正常渲染。

内容的提问来源于stack exchange，提问作者noahmoss