html 电子邮件未显示响应

Question

我在所有 table 标签上使用 width=100% 和 max-width=600px，但当屏幕尺寸较大时，电子邮件会占用整个屏幕尺寸（大于 600px）。基本上它看起来只是响应宽度 100%。有什么想法可以帮助保持这封电子邮件的响应速度，但又不会在大于 600 像素的屏幕上显示吗？我希望它以最大 600 像素的宽度显示，但缩小以适合所有屏幕。

代码：

<body>
<!-- Email Wrapper -->
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" max-width="600"style="border-collapse: collapse; background-color: #F2F2F2; height: 100% !important;width: 100% !important;">
<tbody>
<tr>
<td align="center" valign="top" style="margin: 0;padding: 20px;border-top: 0;height: 100% !important;width: 100% !important;">
<!-- Container -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600"style="border-collapse: collapse; background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
 <tbody>
 <tr>
        <!-- Preheader -->
          <table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
            <tbody>
              <tr>
                <td valign="top" style="padding-top: 9px;padding-left: 18px;padding-bottom: 9px;padding-right: 0;color: #606060;font-family: Helvetica, sans-serf;font-size: 11px;line-height: 125%;text-align: left;">Forum Group Lorem ipsum dolor sit amet</td>
                <td valign="top" style="padding-top: 9px;padding-left: 9px;padding-bottom: 9px;padding-right: 18px;color: #606060;font-family: Helvetica, sans-serf;font-size: 11px;line-height: 125%;text-align: right;"><a href="#" style="color: #606060">view in browser</a></td>
              </tr>  
            </tbody>
          </table>
<!-- End Preheader -->
          <!-- Preheader Spacer-->
          <table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
            <tbody>
              <tr>
                <td valign="top" style="padding-top: 9px;padding-left: 18px;padding-bottom: 9px;padding-right: 0;color: #606060;"></td>
                <td valign="top" style="padding-top: 9px;padding-left: 9px;padding-bottom: 9px;padding-right: 18px;color: #606060;"></td>
              </tr>  
            </tbody>
          </table>
          <!-- End Preheader Spacer-->
          <!-- Header Image-->
          <table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
            <tbody>
              <tr>
                <td style="text-align:center">
                  <img src="img/logo-forum-group.png" max-width="286" max-height="115" border="0" alt="The Forum Group Logo">
                </td>
              </tr>  
            </tbody>
          </table>
<!-- Header Spacer-->
          <table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
            <tbody>
              <tr>
                <td valign="top" style="padding-top: 9px;padding-left: 18px;padding-bottom: 9px;padding-right: 0;color: #606060;"></td>
                <td valign="top" style="padding-top: 9px;padding-left: 9px;padding-bottom: 9px;padding-right: 18px;color: #606060;"></td>
              </tr>  
            </tbody>
          </table>
          <!-- Header Strip-->
          <table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #eef0f6;border-top: 0;border-bottom: 0;">
            <tbody>
              <tr>
                <td valign="top" style="padding-top: 9px;padding-left: 18px;padding-bottom: 9px;padding-right: 0;color: #202020;font-family: Helvetica, sans-serf;font-size: 30px;line-height: 125%;text-align: left; text-transform: uppercase;">The Forum Group</td>
              </tr>  
            </tbody>
          </table>
          <table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #eef0f6;border-top: 0;border-bottom: 0;">
            <tbody>
              <tr>
                <td valign="top" style="padding-top: 9px;padding-left: 20px;padding-bottom: 15px;padding-right: 20px;color: #202020;font-family: Helvetica, sans-serf;font-size: 14px;line-height: 100%;text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
              </tr>  
            </tbody>
          </table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #eef0f6;border-top: 0;border-bottom: 0;">
            <tbody>
              <tr>
                <td valign="top" style="padding-top: 9px;padding-left: 20px;padding-bottom: 9px;padding-right: 20px;color: #202020;font-family: Helvetica, sans-serf;font-size: 14px;line-height: 100%;text-align: left;"><a style="background-color:#3D87F5; color:#fff;border-radius:5px; padding:10px;text-decoration: none;" href="#">Read More</a></td>
              </tr>  
            </tbody>
          </table>
          <!-- Header Spacer blue-->
          <table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #eef0f6;border-top: 0;border-bottom: 0;">
            <tbody>
              <tr>
                <td valign="top" style="padding-top: 10px;color: #202020;font-size: 14px;line-height: 100%;"></td>
              </tr>  
            </tbody>
          </table>
          <!-- Header Spacer white--> 
          <table border="0" cellpadding="0" cellspacing="0" width="100%" max-width="600" style="border-collapse: collapse; background-color: #FFFFFF;border-top: 0;border-bottom: 0;">
            <tbody>
              <tr>
                <td valign="top" style="padding-top: 9px;padding-left: 18px;padding-bottom: 9px;padding-right: 0;color: #606060;"></td>
                <td valign="top" style="padding-top: 9px;padding-left: 9px;padding-bottom: 9px;padding-right: 18px;color: #606060;"></td>
              </tr>  
            </tbody>
          </table>
 </tr>  
      </tbody>
    </table>
    <!-- End Container -->
 </td>
</tr>  
</tbody>
</table>
<!-- End Email Wrapper -->
</body>
</html>

Answer 1

替换：

<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" max-width="600px"style="border-collapse: collapse; background-color: #F2F2F2; height: 100% !important;width: 100% !important; width: 500px;">

与：

<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="border-collapse: collapse; background-color: #F2F2F2; height: 100% !important; max-width:600px !important;">

html 电子邮件未显示响应

html email not showing responsive

html

css

email

html-email

responsive-design