iPhone/iOS Mail打开粘贴发送的响应式HTML邮件出现缩小渲染问题

当你通过浏览器打开HTML文件后全选复制、粘贴到Gmail等网页端邮件客户端发送时，客户端会自动剥离<head>标签内的所有视口meta标签、媒体查询样式规则，仅保留元素内嵌的style属性与可见内容。iOS Mail无法读取到响应式适配规则，就会默认按照桌面端宽度渲染邮件，最终出现缩小显示的问题。直接通过支持HTML发送的客户端发完整代码时，head标签内容不会被过滤，因此显示正常。

• 首先修复现有代码的属性错误：你的.col.col-100元素的内联样式写反了宽度规则，现有max-width: 320px; min-width: 500px;会强制元素最小宽度为500px，超出移动端屏幕宽度，这是导致iOS下溢出缩放的核心原生代码问题，直接改为min-width: 320px; max-width: 500px;即可解决原生宽度溢出问题。
• 给最外层包裹table新增内联样式max-width: 100vw !important;，强制容器宽度不超过设备视口宽度，避免iOS Mail按桌面端宽度缩放。
• 给body标签的内联style新增min-width: 100vw;，进一步适配iOS视口规则。
• 避免使用浏览器打开复制粘贴的方式发送HTML邮件：如果要通过Gmail发送，使用浏览器插件的「插入HTML」功能直接导入完整代码，不会过滤head标签内的视口meta与样式规则，就能保证iOS Mail正常读取响应式配置。

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