幾天前在切一封 EDM 時碰到了「在所有環境都OK，僅 iOS Gmail App 會跑版」的問題，查了一下算是又刷新了我對 Email 切版的認知，記錄在這裡希望能幫助到健忘的自己及也踩到此雷的人。
實際情況其實比下述的狀況冗長許多，為了節省文字數，我改寫了發生的情境，讓整件事情在敘述上更簡略些。
在這邊，我使用 Putsmail作為寄信的測試工具，並使用 VSCode 的 MJML 作為開發時的預覽及編譯工具。
快速重現問題
版面的需求「共有八張圖，在 PC 瀏覽時為 4x2 的排列，在手機瀏覽時則是 2x4」。當時使用了 mj-group 進行排版，類似的範例如下：
<mjml>
<mj-body background-color="#a3d" width="480px">
<mj-section>
<mj-column>
<mj-text>
<h1>Testing</h1>
</mj-text>
</mj-column>
</mj-section>
<mj-section>
<mj-group>
<mj-column padding-bottom="16px">
<mj-image
padding="0"
width="100px"
src="https://fakeimg.pl/150x150/"
></mj-image>
</mj-column>
<mj-column>
<mj-image
padding="0"
width="100px"
src="https://fakeimg.pl/150x150/"
></mj-image>
</mj-column>
</mj-group>
<mj-group>
<mj-column padding-bottom="16px">
<mj-image
padding="0"
width="100px"
src="https://fakeimg.pl/150x150/"
></mj-image>
</mj-column>
<mj-column>
<mj-image
padding="0"
width="100px"
src="https://fakeimg.pl/150x150/"
></mj-image>
</mj-column>
</mj-group>
</mj-section>
<mj-section padding-top="0">
<mj-group>
<mj-column padding-bottom="16px">
<mj-image
padding="0"
width="100px"
src="https://fakeimg.pl/150x150/"
></mj-image>
</mj-column>
<mj-column>
<mj-image
padding="0"
width="100px"
src="https://fakeimg.pl/150x150/"
></mj-image>
</mj-column>
</mj-group>
<mj-group>
<mj-column padding-bottom="16px">
<mj-image
padding="0"
width="100px"
src="https://fakeimg.pl/150x150/"
></mj-image>
</mj-column>
<mj-column>
<mj-image
padding="0"
width="100px"
src="https://fakeimg.pl/150x150/"
></mj-image>
</mj-column>
</mj-group>
</mj-section>
</mj-body>
</mjml>
將其輸出後透過上面提供的 mail 服務將其分別發送至我的 Gmail、Yahoo Mail 及 Apple Mail 信箱：
可以看到在三個 Email App 都可正常運作，確認沒問題後便將輸出的 HTML 使用 VSCode 自動排版後便將原檔交由後端接手套版。
幾個小時後，我收到了信件在測試發送時於 iOS Gmail App 會嚴重跑版的問題，看起來如下：
當時我完全矇了，由於後端有經手過，很自然地就把套版前和套版後的 HTML 檔拿來比對，由於 HTML 結構、CSS 樣式都完全沒被更動，因此找不到任何端倪，且發送的所有信箱中，僅 iOS Gmail App 有問題，Android 的Mail 平台、其他 iOS Mail 平台，甚至使用瀏覽器開啟 Gmail 均無異常。
後來因為時間不足，只能拜託後端拿第一份壓縮後的 HTML 再次進行套版。
回到家後硬著頭皮下關鍵字，才發現是「將 HTML 排版」這件事情才導致了問題的發生。
解決的方式其實也不難，只要在套版完成後使用 HTML 壓縮工具將 HTML 重新 Minify 即可，例如 willpeavy 有個能達成需求且簡單易用的線上工具：
因為該 issue 的關係也回頭看了文件，才發現其實在 MJML 文件中便有提及：
大致翻譯為：若使用 HTML 美化工具，在 iOS9 環境下會將 mj-group 的輸出採堆疊方式呈現，在輸出的 HTML 中，須將 mj-group 中的欄位空白移除。
結語
我從來沒想過「使用排版工具可能造成問題」，就像一開始所說算是刷新了我對 Email 切版的認知，不過至少找到了問題，未來便可盡量避免此事再次發生。
希望這次的分享能幫助到碰到類似問題的人，不會像我滿頭問號的卡了很久。如果內文有任何錯誤，也煩請不吝指出，謝謝大家。
References:
