本文作者：李曉瑋，騰訊 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適配網頁版等等。本次的目標是針對公司內部用戶的郵件推送優化，所以覆蓋的客戶端和操作系統比較有限，如果要覆蓋更多的設備其實原理也一樣，見招拆招就好，原則就是在不影響之前已適配的設備客戶端的情況下對新設備做支持。

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-right/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郵箱收@qq.com的郵件，會完全過濾style標簽，但是收其他域的郵件會保留style標簽并且不支持media query。所以要適配QQ郵箱有兩個重點。

第一就是保證行內樣式渲染正常。本次最大的一個功能點就是封面圖手機端鋪滿，pc端定寬，QQ郵箱又只能支持行內樣式，所以封面圖就在style里定義了寬度100%，然后針對其他設備和客戶端寫各種hack讓它定寬。

第二是我們要用一些style樣式來調整pc和網頁上的布局，就要用如下辦法來避免對手機QQ郵箱產生副作用。

/*?通過outlook專屬標記屬性來避免QQ郵箱手機版加載?*/ <!--[if?mso]><style?type="text/css"></style> <![endif]--> <!--?通過media屬性來避免QQ郵箱手機版加載?--> <style?type="text/css"?media="screen?and?(min-width:900px)"></style>

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不就好了嗎？

<img?src="#"?width="260"??>

結果outlook2016出來打臉，在pc上鋪滿屏了。

好，再利用outlook2016支持style的特性，用!important提高優先級覆蓋回來：

<style>img{width:260px!importnat;} </style>

記得第一條不？手機QQ郵箱收內部郵件的時候，支持style不支持media query。這么一來手機QQ郵箱上又定寬了，被逼進絕路。

只好祭出ghost table，把用于其他客戶端的那個正常的圖片隱藏了，然后顯示一個專門用于outlook的圖。

<!--[if?mso]> <table?><tr><td> <![endif]--><a?href="#"?class="cover"><img?src="#.jpg"?border="0"?width="100%"></a> <!--[if?mso]></td></tr> </table> <a?href="#"?class="cover"><img?class="img"?src="#.jpg"?border="0"?alt="fsight"?width="260"?height="150"> </a> <![endif]-->

同理可以使用這個outlook專有的標記來隱藏所有用于其他客戶端展示的dom元素，針對outlook做定制，甚至可以暴力一點寫兩套。

這里還遇到一個問題點就是go在渲染郵件模板的時候會自動過濾掉所有的注釋，所以需要使用safe標記，并且轉義寫到一行內。

{{safe?"<!--[if?mso]>?<table?align=\"left\"?border=\"0\"?cellpadding=\"0\"?cellspacing=\"0\"?width=\"570\">?<tr>?<td?width=\"570\">?<![endif]-->"?}} code... {{safe?"<!--[if?mso]></td></tr></table><![endif]-->"}}

最后就是垂直居中問題，常規的圖文混排垂直居中方法就是

<div><img?src="#"?><span??>文字</span></div>

放到outlook里當然無效，td本身的垂直居中在各個版本中的表現也是各不相同。調試了半天，居然是給td一個定高就搞定了。

3 outlook網頁版

有點小坑，它會把style里面的樣式改寫并且把@media里面的代碼清空。

會變為：

所以使用了在style里面寫media屬性的方法來兼容（為了避免手機QQ郵箱會加載這段樣式）。

4 QQ郵箱網頁版（https://mail.qq.com）

PC版沒啥好說的，完全支持各種特性，只是移動版有點小麻煩：

@media?(min-width:?900px)?{.item{} } @media?(max-width:?900px)?{.item{} }

會被替換為

@media?(min-width:?900px)?{.item{}?//?仔細看這里，有個花括號被吃掉了 @media?(max-width:?900px)?{.item{} }

除了最后一個雙}保留了，其他的"}}"都被替換為"}"。我估計是正則替換問題，要破也很簡單，把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內，所以當左邊欄拉的比較寬的時候，內容會安裝手機樣式渲染。

這個也好解決，在640和900之間多寫幾個media區間來適配就好了，體力活。

6 轉發問題

通過上面的工作，系統發的郵件雖然可以適配了，但是轉發的時候就還是會有問題，因為用戶轉發的是經過客戶端處理過的郵件，要么是css不全，要么是ghost table沒了。目前來看手機QQ郵箱客戶端保持的最好，轉發效果基本無損。其他的暫時無解，所以以防萬一請在你的郵件里加上鏈接：“如果無法正常瀏覽請點擊”，跳轉到網頁讓用戶查看完美的頁面。

四、參考資料

1 郵件樣式支持速查表：

https://www.campaignmonitor.com/css/

2 outlook各版本標記：

https://stackoverflow.design/email/base/mso

3 不同郵件服務商讀取 HTML 郵件已知問題一覽表：

http://app1.studiocloud.com/support/index.php?/article/AA-00861/0/Issues-with-HTML-Emails-in-Different-Email-Clients.html

文章中的鏈接如無法打開，可以點擊下方鏈接跳轉到知乎查看，喜歡記得點贊收藏！

歡迎關注騰訊 WeTest：

總結

以上是生活随笔為你收集整理的HTML 文件在PC移动端完美自适应布局的技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。