<table width='100%' cellpadding='0' cellspacing='0'>
<tr><td align='center'>
<table width='600' style='max-width:600px;width:100%'>
模板外层表格写死 width=640,iPhone 的 Gmail 里右侧约 40 像素内容看不到,退订入口正好被裁在屏幕外。先别急着动参数,把报错原文和时间点记下来,顺序反了容易白折腾。
原因不复杂,Gmail 移动端会把整封邮件缩放到视口宽度,固定 640 的表格在 375 像素屏上按比例缩,内层再套固定宽度就顶出边界。外层没有 max-width 约束时,裁切只在窄屏出现。
这次卡住的地方就在「邮件模板宽度 640」这一环,单独把它拎出来验证,别和其他改动混在同一次发布里。改动写完就同步给同事,下一个人踩同一个坑,成本还是你的。
验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。
处理上按这个顺序:外层表格宽度改成 100%,内层再包一层 max-width:600px,两层职责分开;所有图片加 max-width:100% 和 height:auto,别让图片把表格撑宽;用 320 像素宽的模拟器再看一遍,320 能过 375 基本没问题。
改完只确认一件事:320 像素宽下整封邮件不出现横向滚动,右侧退订链接完整可见。
