Gmail移动应用端邮件模板字体缩小、双图并排排版异常求助

可尝试的解决方案 #

• 禁用Gmail自动字体缩放功能
  在邮件<body>标签的内联样式，以及所有<td>标签的通用样式中添加以下属性，阻止Gmail自动调整字体大小：

-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;

• 补全图片和容器的宽度约束
  当前代码只给<td>加了HTML属性的width="50%"，没有在inline样式中声明宽度，且图片缺少响应式约束，Gmail会忽略部分HTML原生属性，按以下规则调整：
  • 给两个并列的<td>加上内联样式：style="width:50%;min-width:50%;"
  • 给所有<img>标签加上内联样式：style="width:100%;height:auto;display:block;border:none;"，同时补全width、height原生属性，填入图片的原始像素值
  • 给包裹图片的.fluid-img容器加上内联样式：style="font-size:0;line-height:0;"，消除多余空白间隙撑宽容器
• 邮件头部添加视口meta标签
  在邮件代码的<head>区域添加以下视口声明，防止移动端强制缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

• 外层容器添加最小宽度限制
  给最外层的<table>加上内联样式：style="min-width:320px;"，避免Gmail将模板宽度压缩到过小的阈值。

修正后核心代码示例 #

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width:320px;">
    <tr>
        <!-- LEFT IMAGE GOES HERE -->
        <td valign="top" width="50%" class="img trnd-mobb-td1" style="width:50%;min-width:50%;" align="left">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td class="thumb1" style="-webkit-text-size-adjust: none;-ms-text-size-adjust: none;text-size-adjust: none;" align="left">
                        <div class="fluid-img" style="font-size:0;line-height:0;" align="center">
                            <a href="https://www.dummy.com/" target="_blank" style="">
                                <img class="subarticle-img" border="0" src="https://media.sailthru.com/1gg/1k5/a/o/6176392b5e7cc.jpeg" alt="This Is Not a Drill: 6 Products for a More Even Skin Tone" width="300" height="400" style="width:100%;height:auto;display:block;border:none;"  />
                            </a>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
        
        <!-- RIGHT IMAGE GOES HERE -->
        <td valign="top" class="img trnd-mobb-td2" style="width:50%;min-width:50%;" align="left">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td class="thumb" style="-webkit-text-size-adjust: none;-ms-text-size-adjust: none;text-size-adjust: none;" align="left">
                        <div class="fluid-img" style="font-size:0;line-height:0;" align="center">
                            <a href="https://www.dummy.com/" target="_blank" style="">
                                <img class="subarticle-img" border="0" src="https://media.sailthru.com/1gg/1k5/a/o/6176393723c2b.jpeg" alt="This Is Not a Drill: 6 Products for a More Even Skin Tone" width="300" height="400" style="width:100%;height:auto;display:block;border:none;"  />
                            </a>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

效果对比 #

• Yahoo移动应用正常效果：
  
• Gmail移动应用异常效果：
  

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