HTML 电子邮件 : making it work both in Outlook and on mobile

Question

我正在为 html 电子邮件编写模板(上帝保佑我的灵魂)。设计看起来很简单——有一些文本和图像居中对齐的 block :

没有太花哨的东西，没有多列布局或任何东西，但是，我被卡住了。这是给我带来问题的原因:

• 在桌面屏幕上，中央 block 的宽度应为 480 像素。
• 在手机上，纵向(小于 480 像素)，中央 block 应占据整个屏幕宽度

所以我解决这个问题的方法(借鉴/受其他模板启发)是创建一个 100% 宽度的表格，里面有另一个表格，也是 100% 宽度，最大宽度为 480px，如下所示:

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
  <tr>
    <td align="center">
      <table border="0" cellpadding="0" cellspacing="0" width="100%" style="width: 100%; max-width: 480px;">
        <tr>
            <td>
               Some blah
            </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

它适用于移动设备。它适用于浏览器客户端。它适用于雷鸟。它适用于 Apple Mail。这让我微笑。但当然，Outlook 不能做到最大宽度，因此它会将中央 block 放大到 100% 宽度。

那么我怎样才能修改我的代码，使这个设计在 Outlook 中也能正常工作？

编辑: 当我将内部表格的宽度设置为 480px 时，这就是我在纵向手机屏幕上得到的结果:

Answer 1

也许你可以使用this trick from elidickinson :

<!--[if mso]>
<center>
<table><tr><td width="480"> 
<![endif]--> 
<div style="max-width:480px; margin:0 auto;">
   ...
</div> 
<!--[if mso]> 
</td></tr></table> 
</center> 
<![endif]-->