如何制作最大宽度的可变宽度电子邮件 [英] How to make a fluid width email with a max width

问题描述

我有一个表格元素，将通过电子邮件发送.

I have a table element which I'm going to send as an email.

我希望它在Outlook 2010，Android原生的gmail和android chrome的gmail上呈现.

I want it to render on outlook 2010, gmail native for android, and gmail on chrome on android.

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

I would like my table to have 100% width upto 600px.

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

One solution would be do with fixed settings, and have media queries.

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

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

此功能在android上的chrome上除gmail之外几乎都能正常使用，它的宽度为600px并溢出屏幕，破坏了整个布局.

This works fine in all but gmail on chrome on android, which takes the 600px width and overflows the screen, breaking the whole layout.

所以我考虑过进行流畅的布局，将100％放到桌子上，并给它一个最大宽度，但是现在Outlook不尊重最大宽度，因此它看起来太宽了.

So I thought about doing a fluid layout, and putting 100% to the table, and giving it a max-width, but now outlook does not respect max-width, so it looks too wide in outlook.

所以我不能使用流体，因为它在外观上看起来很糟糕，我不能使用固定的，因为它在移动设备上的chrome上的gmail上看起来很糟糕.

So I can't use fluid because it looks bad on outlook, and I can't use fixed because it looks bad on gmail on chrome on mobile.

有什么办法可以使两者看起来都不错吗?是否有任何破解方法?

Is there any way I can make the look ok in both? Is there any hack for this?

推荐答案

媒体查询在Android和iPhone的Gmail应用中不起作用.

Media queries doesn't work in Gmail App for Android and iPhone.

这可以完成下面所示的基本布局.

This can be done constructing basic layout shown below.

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

Tested in 60+ configurations, including:

• 展望13年3月7日
• 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>

这篇关于如何制作最大宽度的可变宽度电子邮件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！