中秋节给领导的祝福短信布局自适应
试想一下，你在夜深人静的时候，预备睡前查看一下订阅的邮件周报，而且还是一个细心设计过的HTML富文本邮件。只不过它只能在pc上完善呈现，在手机上最大的字号惟独不到4像素，也变成了马赛克，会是一种怎样的虐心体验。
最近做了一个发邮件的手机端适配需求就是要解决这个体验问题，先上效果。
优化前：
优化后：
固然，pc端和网页版也要完善适配，outlook、foxmail和网页版效果如下：
参考比较频繁的响应式布局，在PC端用法左图布局，移动端右图。转换时将的宽度由定宽改为铺满，使标题等文字换行展示。
最近做了一个发邮件的手机端适配需求就是要解决这个体验问题，先上效果。
优化前：
优化后：
固然，pc端和网页版也要完善适配，outlook、foxmail和网页版效果如下：
参考比较频繁的响应式布局，在PC端用法左图布局，移动端右图。转换时将的宽度由定宽改为铺满，使标题等文字换行展示。
1 邮箱渲染html的兼容性问题无数，在桌面和移动端渲染大约有上百万种不同的组合方式，所以我们要出一个最小子集来书写html和样式。然后用平稳退化和渐进增加的思路，对其他要适配的设备和客户端举行保底处理和扫瞄体验优化。
2 邮件里不能执行脚本，各种邮件客户端对media query的支持程度十分有限，所以不行能按照接收邮件的终端来构建不同的dom和cssom，必需撸一套代码适配全部终端。
3 本次迭代的目标是提升手机端阅读体验，以机端原生邮箱客户端和QQ邮箱作为基础。然后用各种hack手段来适配其他设备和客户端。比如用ghost table适配outlook，media query适配网页版等等。本次的目标是针对公司内部用户的邮件推送优化，所以笼罩的客户端和操作系统比较有限，假如要笼罩更多的设备其实原理也一样，见招拆招就好，原则就是在不影响之前已适配的设备客户端的状况下对新设备做支持。
如何消灭跳蚤
4 移动端web的常规优化对邮件html同样适用，比如用法更小的字体、格式选型和压缩、高
精度适配retina屏、用css绘制小图标代替等等。
1 因为 OutLook从2003版本为了平安开头便用法 Word HTML 引擎举行渲染，所以我们只能用法table布局，标签也只能用法table / tr / td / span / img / a，colspan / rowspan也不能放心用法。假如要实现复杂布局，就要用法table嵌套。
2 body以外的内容所有无效，比如outlook网页版，它会把body替换成一个类名叫x_body的div，然后把body的内容所有塞进去。
3 style标签的支持程度十分碎片化，media query的支持越发有限，所以要用属性和style行内样式来保底布局。
4 邮件html里没有任何脚本。
5 不要简写样式，比如：padding: 12px 会在outlook2013失效，改为padding-left/padding-r
1 因为 OutLook从2003版本为了平安开头便用法 Word HTML 引擎举行渲染，所以我们只能用法table布局，标签也只能用法table / tr / td / span / img / a，colspan / rowspan也不能放心用法。假如要实现复杂布局，就要用法table嵌套。
2 body以外的内容所有无效，比如outlook网页版，它会把body替换成一个类名叫x_body的div，然后把body的内容所有塞进去。
3 style标签的支持程度十分碎片化，media query的支持越发有限，所以要用属性和style行内样式来保底布局。
4 邮件html里没有任何脚本。
5 不要简写样式，比如：padding: 12px 会在outlook2013失效，改为padding-left/padding-r
ight/padding-top/padding-bottom，font简写也一样。
6 对于img标签，用属性来控制尺寸，style = "width:100px"这样的代码在outlook2013会失效，而且会把定宽的td和table撑开。width="100%" 这样的css属性也是无效的。
7 Outlook 2007-2013 不支持的 margin 与 padding 样式，须要的时候可以尝试 hspace 和 vspace 属性（十分不建议，用父元素的margin和padding来代替就好了）。
1 QQ邮箱手机客户端（版本信息：IOS11，5.6.2）
QQ邮箱收@的邮件，会彻低过滤style标签，但是收其他域的邮件会保留style标签并且不支持media query。所以要适配QQ邮箱有两个重点。
第一就是保证行内样式渲染正常。本次最大的一个功能点就是封面图手机端铺满，pc端定宽，QQ邮箱又只能支持行内样式，所以封面图就在style里定义了宽度100%，然后针对其
6 对于img标签，用属性来控制尺寸，style = "width:100px"这样的代码在outlook2013会失效，而且会把定宽的td和table撑开。width="100%" 这样的css属性也是无效的。
7 Outlook 2007-2013 不支持的 margin 与 padding 样式，须要的时候可以尝试 hspace 和 vspace 属性（十分不建议，用父元素的margin和padding来代替就好了）。
1 QQ邮箱手机客户端（版本信息：IOS11，5.6.2）
QQ邮箱收@的邮件，会彻低过滤style标签，但是收其他域的邮件会保留style标签并且不支持media query。所以要适配QQ邮箱有两个重点。
第一就是保证行内样式渲染正常。本次最大的一个功能点就是封面图手机端铺满，pc端定宽，QQ邮箱又只能支持行内样式，所以封面图就在style里定义了宽度100%，然后针对其
他设备和客户端写各种hack让它定宽。
其次是我们要用一些style样式来调节pc和网页上的布局，就要用如下方法来避开对手机QQ邮箱产生副作用。
2 手机原生邮件客户端（版本信息：IOS11，5.6.2）
这个最省心，支持media query，支持display:flex，在QQ手机邮箱的基础上针对原生客户端又做了一些体验优化。
3 outlook客户端（版本信息：2007-2016）
这个最棘手，就是前面说的Word HTML 引擎。支持style，不支持media query，不支持img样式。我们这个需求最大的功能点就是在大于900宽度的屏幕上封面图按260宽渲染，在小于900宽度下铺满屏幕。outlook2013之前又只支持用attr来固定宽高，css定义width彻
其次是我们要用一些style样式来调节pc和网页上的布局，就要用如下方法来避开对手机QQ邮箱产生副作用。
2 手机原生邮件客户端（版本信息：IOS11，5.6.2）
这个最省心，支持media query，支持display:flex，在QQ手机邮箱的基础上针对原生客户端又做了一些体验优化。
3 outlook客户端（版本信息：2007-2016）
这个最棘手，就是前面说的Word HTML 引擎。支持style，不支持media query，不支持img样式。我们这个需求最大的功能点就是在大于900宽度的屏幕上封面图按260宽渲染，在小于900宽度下铺满屏幕。outlook2013之前又只支持用attr来固定宽高，css定义width彻
低无效，还会撑破td和table），一旦写了固定值就会影响到上面说的手机邮箱客户端，怎么处理这个矛盾就是关键点了。
一开头的主意比较容易，挺直用style笼罩attr不就好了吗？
结果outlook2016出来打脸，在pc上铺满屏了。
放风筝作文300字优秀
好，再利用outlook2016支持style的特性，用！important提高优先级笼罩回归：
记得第一条不？手机QQ邮箱收内部邮件的时候，支持style不支持media query。这么一来手机QQ邮箱上又定宽了，被逼进绝路。
只好祭出ghost table，把用于其他客户端的那个正常的躲藏了，然后显示一个特地用于outlook的图。
一开头的主意比较容易，挺直用style笼罩attr不就好了吗？
结果outlook2016出来打脸，在pc上铺满屏了。
放风筝作文300字优秀
好，再利用outlook2016支持style的特性，用！important提高优先级笼罩回归：
记得第一条不？手机QQ邮箱收内部邮件的时候，支持style不支持media query。这么一来手机QQ邮箱上又定宽了，被逼进绝路。
只好祭出ghost table，把用于其他客户端的那个正常的躲藏了，然后显示一个特地用于outlook的图。
同理可以用法这个outlook专有的标志来躲藏全部用于其他客户端展示的dom元素，针对outlook做定制，甚至可以暴力一点写两套。
这里还碰到一个问题点就是go在渲染邮件模板的时候会自动过滤掉全部的注释，所以需要用法safe标志，并且转义写到一行内。
最后就是垂直居中问题，常规的图文混排垂直居中办法就是
放到outlook里固然无效，td本身的垂直居中在各个版本中的表现也是各不相同。调试了半天，竟然是给td一个定高就搞定了。
3 outlook网页版
有点小坑，它会把style里面的样式改写并且把@media里面的代码清空。
这里还碰到一个问题点就是go在渲染邮件模板的时候会自动过滤掉全部的注释，所以需要用法safe标志，并且转义写到一行内。
最后就是垂直居中问题，常规的图文混排垂直居中办法就是
放到outlook里固然无效，td本身的垂直居中在各个版本中的表现也是各不相同。调试了半天，竟然是给td一个定高就搞定了。
3 outlook网页版
有点小坑，它会把style里面的样式改写并且把@media里面的代码清空。
会变为：
茂名市中考成绩查询所以用法了在style里面写media属性的办法来兼容（为了避开手机QQ邮箱会加载这段样式）。
4 QQ邮箱网页版（
PC版没啥好说的，彻低支持各种特性，只是移动版有点小棘手：
会被替换为
除了最后一个双}保留了，其他的"}}"都被替换为"}"。我估量是正则替换问题，要破也很容易，把media写到style属性，或者分多个style标签即可。
另外ipad模式下 QQ邮箱web版会浮现一个宽度200的侧边栏。所以邮件正文实际用法的空
茂名市中考成绩查询所以用法了在style里面写media属性的办法来兼容（为了避开手机QQ邮箱会加载这段样式）。
4 QQ邮箱网页版（
PC版没啥好说的，彻低支持各种特性，只是移动版有点小棘手：
会被替换为
除了最后一个双}保留了，其他的"}}"都被替换为"}"。我估量是正则替换问题，要破也很容易，把media写到style属性，或者分多个style标签即可。
另外ipad模式下 QQ邮箱web版会浮现一个宽度200的侧边栏。所以邮件正文实际用法的空
间会少，写max-width的时候需要注重（你以为它有768px，事实上惟独568px）。
5 mac原生客户端和foxmail客户端 （版本信息：win7.2/mac1.2）
这几个客户端也很好搞，支持media query，支持flex，可以按照屏幕大小任意定制样式。这次只是用法900px作为手机和pc的分界点。foxmail有个特性就是边栏的宽度不算在media query内，所以当左边栏拉的比较宽的时候，内容会安装手机样式渲染。
2022世界杯
这个也好解决，在640和900之间多写几个media区间来适配就好了，体力活。
0514是哪里的区号
6 转发问题
通过上面的工作，系统发的邮件虽然可以适配了，但是转发的时候就还是会有问题，由于用户转发的是经过客户端处理过的邮件，要么是css不全，要么是ghost table没了。目前来看手机QQ邮箱客户端保持的最好，转发效果基本无损。其他的临时无解，所以以防万一请
5 mac原生客户端和foxmail客户端 （版本信息：win7.2/mac1.2）
这几个客户端也很好搞，支持media query，支持flex，可以按照屏幕大小任意定制样式。这次只是用法900px作为手机和pc的分界点。foxmail有个特性就是边栏的宽度不算在media query内，所以当左边栏拉的比较宽的时候，内容会安装手机样式渲染。
2022世界杯
这个也好解决，在640和900之间多写几个media区间来适配就好了，体力活。
0514是哪里的区号
6 转发问题
通过上面的工作，系统发的邮件虽然可以适配了，但是转发的时候就还是会有问题，由于用户转发的是经过客户端处理过的邮件，要么是css不全，要么是ghost table没了。目前来看手机QQ邮箱客户端保持的最好，转发效果基本无损。其他的临时无解，所以以防万一请
在你的邮件里加上链接：假如无法正常扫瞄请点击，跳转到网页让用户查看完善的页面。
1 邮件样式支持速查表：
2 outlook各版本标志：
1 邮件样式支持速查表：
2 outlook各版本标志：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论