iPhone端Gmail客户端邮件模板渲染异常及固定宽度适配咨询

问题核心原因 #

1. 现有代码未设置移动端视口适配规则，iOS端Gmail会自动调整无适配规则的邮件内容宽度
2. 外层table固定宽度为640px，但内部两个单元格宽度总和（180px + 495px）超出了外层宽度，导致布局被挤压变形

修复步骤 #

1. 在<head>标签内添加视口元标签和适配样式，代码如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style type="text/css">
    body, html {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        min-width: 640px !important;
        -webkit-text-size-adjust: 100%;
    }
    /* 适配iOS端Gmail不压缩布局 */
    @media only screen and (max-width: 640px) {
        table[class="main-wrap"] {
            width: 100% !important;
            min-width: 640px !important;
        }
    }
</style>

2. 修正外层table的属性和内部单元格宽度冲突：
   给外层table添加class="main-wrap"，同时将右侧单元格的宽度从495px调整为453px，保证两个单元格+间距的总宽度不超过外层640px的限制：

<table width="640" class="main-wrap" border="0" cellpadding="0" cellspacing="3" style="font-family: 'Trebuchet MS', Helvetica, sans-serif; font-size: 15px;">
  <!-- 其他代码不变 -->
  <td width="180" align="left" style="width: 180px; border: 1px solid #CACACA; padding: 3px; border-radius: 5px">
    <!-- 左侧卡片代码不变 -->
  </td>
  <td width="453" align="left" valign="middle" style="width: 453px; border: 1px solid #CACACA; vertical-align: middle; padding: 3px; border-radius: 5px">
    <!-- 右侧表格代码不变 -->
  </td>
</table>

3. 所有<img>标签添加style="display:block; border:none;"，避免iOS端默认给图片添加额外间距。

修改后邮件模板会保持640px的固定宽度，当视口宽度小于640px时，iOS端Gmail会自动将整体内容等比例缩放适配屏幕，不会挤压内部布局。

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