Question

我有一个表格元素，我将作为电子邮件发送。

我希望它在outlook 2010上渲染，在Android上使用gmail本地，在android上使用chrome上的gmail。

我希望我的表格宽100％，最高可达600px。

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

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

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

除了机器上的Chrome上的gmail之外，这种方法都很好用，它占用600px宽度并溢出屏幕，打破了整个布局。

所以我考虑做一个流畅的布局，并将100％放在桌子上，并给它一个最大宽度，但现在outlook不尊重max-width，所以它看起来太宽了。

所以我不能使用流体，因为它在outlook上看起来很糟糕，而且我不能使用fixed，因为它在手机上的chrome上看起来很糟糕。

有什么方法可以让两者看起来都不错吗？这有什么黑客攻击吗？

Answer 1

媒体查询在适用于Android和iPhone的Gmail应用中无效。

这可以构建如下所示的基本布局。

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

展望03/07/10/11/13
iPhone 5 iOS7
iPhone 5/6 iOS8
Gmail App iPhone＆amp;的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>

Answer 2

使用具有流体布局的条件代码。我还会为您的容器分配一个类或ID，并将其作为一个定义的宽度（例如600px）放在样式块的头部，媒体查询在低于该宽度后推回百分比。这适用于Apple邮件和其他几个不尊重max-width的客户端。

E.g。

    <head><style> #outlook {width:600px;}</style></head>
<body>
    <!--[if (mso) | (IE)]>
          <table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td>
        <![endif]-->
                <table width="100%" align="center" cellpadding="0" cellspacing="0" border="0" style=" max-width: 600px; border-collapse:collapse;" id="outlook">
                    <tr>
                    <td align="center"> YOUR CONTENT HERE</td>
                  </tr>
                </table>
        <!--[if (mso) | (IE)]>
              </td>
            </tr>
        </table>
        <![endif]-->

</body>

如何制作最大宽度的流体宽度电子邮件

2 个答案: