如何制作最大宽度的可变宽度电子邮件

Question

我有一个表格元素，将以电子邮件形式发送。

我希望它在Outlook 2010，Android原生gmail和chrome在chrome上渲染。

我希望表格的宽度为100％，最大为600px。

一种解决方案是使用固定设置，并进行媒体查询。

@media screen and (max-width: 600px) {

    table[class="responsive-table"] {
        width: 100% !important;
    }
}

这在android上的chrome上除gmail以外的所有应用程序均能正常工作，它的宽度为600px并溢出屏幕，破坏了整个布局。

因此，我考虑过进行流畅的布局，将100％放置在桌子上，并为其设置最大宽度，但是现在Outlook不尊重最大宽度，因此它看起来太宽了。

因此，我不能使用Fluid，因为它在Outlook上看起来很糟糕，我不能使用Fixed，因为在chrome上的gmail手机上看起来很糟糕。

有什么办法可以使两者看起来都不错吗？是否有此技巧？

Answer 1

媒体查询不适用于Android和iPhone的Gmail应用。

这可以通过构造如下所示的基本布局来完成。

经过60多种配置的测试，包括：

• 前景13/07/10/11/13
• iPhone 5 iOS7
• iPhone 5/6 iOS8
• Gmail App iPhone和Android
• Android 4.4.4

<!-- wrapper -->
<table align="center" width="100%" style="width: 100%;">
  <tr>
    <!-- this cell scales automatically, don't set width on it -->
    <!-- add &nbsp; to ensure it will be rendered -->
    <td>&nbsp;</td>

    <!-- in the middle cell you set your max-width -->
    <!-- notice double declaration for yahoo in html attribute -->
    <td align="center" width="600" style="width: 600px;">

      <!-- this table scales up to parent cell -->
      <table align="center" border="0" width="100%" style="width: 100%;">
        <tr>
          <td align="center">
            <!-- content -->
          </td>
        </tr>
      </table>

    </td>

    <!-- this cell scales automatically, don't set width on it -->
    <!-- add &nbsp; to ensure it will be rendered -->
    <td>&nbsp;</td>
  </tr>
</table>