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

我有一个表元素，我将作为电子邮件发送。
我希望它能呈现在outlook 2010上，用于android的gmail原生版，android的chrome上的gmail。
我想要我的桌子100%宽到600像素。
一种解决方案是使用固定设置，并进行媒体查询。

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

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

在android的chrome浏览器上，除了gmail外，其他所有的浏览器都能很好地工作，gmail的宽度为600px，并溢出屏幕，破坏了整个布局。
所以我想做一个流畅的布局，把100%放在桌子上，给它一个最大宽度，但是现在outlook不尊重最大宽度，所以outlook看起来太宽了。
所以我不能使用fluid，因为它在outlook上看起来不好，我不能使用fixed，因为它在移动chrome上的gmail上看起来不好。
我有没有办法把这两件衣服都穿好？这有什么诀窍吗？

最佳答案

在Android和iPhone的Gmail应用程序中，媒体查询不起作用。
这可以通过构建如下所示的基本布局来完成。
在60多个配置中进行测试，包括：
展望03/07/10/11/13
iPhone 5 iOS7
iPhone 5/6 iOS8
Gmail应用程序iPhone和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>

关于html - 如何制作最大宽度的可变宽度电子邮件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30485328/