How to make a fluid width email with a max width

后端未结

关注

 2  1429

天命终不由人

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 wou

相关标签:

2条回答

悲&欢浪女

2021-02-11 06:52

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>

0 讨论(0)

广开言路

2021-02-11 06:56

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>

0 讨论(0)