Gmail Mobile不遵循图片max-width:100%样式问题求解决方案

我之前也碰到过Gmail Mobile这种*「自作主张」*修改样式的情况，确实头疼！针对你说的问题，给你几个经过实际验证的解决方案：

1. 强制内联样式+HTML属性双保险 #

Gmail会过滤掉非内联的CSS，所以一定要把关键样式直接写在图片标签里，同时配合HTML原生属性，让Gmail没法瞎改：

<img src="your-image-url.jpg" 
     alt="页脚图片" 
     width="100%" 
     style="width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important;" />

• width="100%"：HTML原生属性，Gmail会优先读取这个值
• style里的!important：强制覆盖Gmail插入的无效样式
• height:auto：保证图片比例不变，避免拉伸变形
• display:block：消除图片默认的inline间距，防止额外宽度溢出

2. 用Table容器加固布局 #

邮件里Table的兼容性远强于Div，把图片放在100%宽度的Table单元格里，能进一步限制图片的宽度：

<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width: 100%; margin: 0; padding: 0;">
  <tr>
    <td style="padding: 0; margin: 0;">
      <img src="your-image-url.jpg" 
           alt="页脚图片" 
           width="100%" 
           style="width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important;" />
    </td>
  </tr>
</table>

这个方法相当于给图片加了一层「刚性容器」，即使Gmail想篡改图片样式，也会被Table的宽度限制住。

3. 针对Gmail Mobile的媒体查询兜底 #

虽然Gmail对内嵌CSS的支持有限，但移动端的媒体查询大多能生效，你可以在邮件头部的<style>标签里添加：

@media screen and (max-width: 480px) {
  .footer-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

然后给图片加上对应的class：

<img src="your-image-url.jpg" alt="页脚图片" width="100%" class="footer-image" style="width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important;" />

这样即使内联样式被意外篡改，媒体查询也能在移动端强制修正图片宽度。

额外注意事项 #

• 避免使用外部CSS文件：Gmail会直接忽略外部样式，所有关键样式必须内联或放在邮件内部的<style>标签里
• 测试时用真实设备：Chrome的模拟有时候和真实Gmail App的表现有差异，最好用iPhone 5/SE真机测试
• 图片原始尺寸：如果图片原始宽度远大于移动端设备宽度，尽量先压缩到合适的最大宽度（比如600px），减少Gmail篡改的概率

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