iOS Mail中HTML邮件签名显示过小的问题求助

问题描述 #

用内联代码+表格制作的带两张图片的邮件签名，MacOS Mail发送后桌面端各客户端显示正常，但iOS Mail中表格被过度缩小，字体尺寸极小。表格为3行2列结构，两行带背景色，一行通过colspan实现整行宽度。已尝试调整文本量、单元格设像素宽度、表格设width:100%、修改图片display属性，均无效；移除图片后两列宽度均等且充满容器，推测问题出在图片样式。

修复方案 #

针对iOS Mail的渲染特性，添加以下CSS/HTML属性即可解决：

• 给表格添加固定宽度+最小宽度，同时设置table-layout: fixed，强制表格按设定宽度布局，避免自动压缩
• 给图片添加max-width: 100%和height: auto，既保留图片基准尺寸，又防止在小屏幕被过度缩放
• 给每个单元格设置min-width，明确列的最小宽度，防止被挤压

修改后的代码 #

<table border="0" cellspacing="0" cellpadding="0" style="width: 600px; min-width: 600px; table-layout: fixed;">
    <tr>
      <td valign="top" style="background:#f9f2c8;padding:21px 20px 0 20px;vertical-align:top;min-width: 320px;">
        <div style="font-size:13px;">
          <div style="font-size:16px;font-weight:600;">Name of the sender</div>
          <div>Description of the role of the sender</div>
        </div>
      </td>
      <td valign="top" style="background:#96e7cf;padding:18px 20px 0 16px;vertical-align:top;min-width: 220px;">
        <img src='logo.png' width="124" height="41" alt="Org logo" style="width:124px;height:auto;max-width:100%;display:inline;" />
      </td>
    </tr>
    <tr>
      <td valign="bottom" style="background:#f9f2c8;padding:0 20px 20px 20px;vertical-align:bottom;min-width: 320px;">
        <div><img src='line.png' alt="divider" width="210" height="24" style="width:210px;height:auto;max-width:100%;display:inline;" /></div>
        <div style="font-size:13px;">06 1234 5678</div>
      </td>
      <td valign="bottom" style="background:#96e7cf;padding:0 20px 20px 20px;vertical-align:bottom;min-width: 220px;">
        <div style="font-size:14px; font-weight:600; white-space:nowrap;">tagline of the org</div>
        <div style="font-size:13px;"><a href="#" style="text-decoration:none;">organisation.nl</a></div>
      </td>
    </tr>
    <tr>
      <td colspan="2" style="padding:20px;">
        <p style="font-size:13px;margin:0 0 8px 0;">Werkzaam op maandag, dinsdag, woensdagmorgen, donderdag en vrijdag</p>
      </td>
    </tr>
</table>

关键修改说明 #

• table-layout: fixed：强制表格使用设定的宽度布局，忽略内容自动调整逻辑，这是解决iOS Mail压缩问题的核心
• 表格的width和min-width：确保表格不会小于设定的宽度，避免被邮件容器挤压
• 图片的height:auto+max-width:100%：在保留图片原始比例的同时，防止图片超出单元格范围，避免触发iOS Mail的自动压缩机制
• 单元格的min-width：明确每列的最小宽度，防止列被过度压缩导致文字变小

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