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.

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

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;
    }
}

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

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.

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?

回答1:

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

This can be done constructing basic layout shown below.

Tested in 60+ configurations, including:

Outlooks 03/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>

回答2:

Use conditional code with fluid layout. I also would assign a class or ID to your container and have it as a defined width (e.g.600px) in style block in head with media queries pushing back to percent after dropping below that width. This is for Apple mail and a couple other clients that do not respect 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>

来源：https://stackoverflow.com/questions/30485328/how-to-make-a-fluid-width-email-with-a-max-width

标签

html

css

outlook

gmail

html-email