HTML 文件在PC&移动端完美自适应布局的技巧

本文作者： 李晓玮，腾讯 IEG 高级工程师

都2019年了，手机查看HTML邮件的体验怎么还那么差？

试想一下，你在夜深人静的时候，准备睡前查看一下订阅的邮件周报，而且还是一个精心设计过的HTML富文本邮件。只不过它只能在pc上完美展现，在手机上最大的字号只有不到4像素，图片也变成了马赛克，会是一种怎样的虐心体验。

最近做了一个群发邮件的手机端适配需求就是要解决这个体验问题，先上效果。

优化前：

优化后：

当然，pc端和网页版也要完美适配，outlook、foxmail和网页版效果如下：

一、实现思路

参考比较常见的响应式布局，在PC端使用左图布局，移动端右图。转换时将图片的宽度由定宽改为铺满，使标题等文字换行展示。

1 邮箱渲染html的兼容性问题很多，在桌面和移动端渲染电子邮件大约有上百万种不同的组合方式，所以我们要找出一个最小子集来书写html和样式。然后用平稳退化和渐进增强的思路，对其他要适配的设备和客户端进行保底处理和浏览体验优化。

2 邮件里不能执行脚本，各种邮件客户端对media query的支持程度非常有限，所以不可能根据接收邮件的终端来构建不同的dom和cssom，必须撸一套代码适配所有终端。

3 本次迭代的目标是提升手机端阅读体验，以机端原生邮箱客户端和QQ邮箱作为基础。然后用各种hack手段来适配其他设备和客户端。比如用ghost table适配outlook，media query适配网页版等等。本次的目标是针对公司内部用户的邮件推送优化，所