两列响应式电子邮件媒体查询 - iPhone 不显示全宽表格

Question

我正在尝试使用电子邮件的媒体查询创建一个响应式两列行（在 table 中）。使用 table align method from Mailchimp，它在桌面和 Android 上看起来很棒。在 iPhone 上，媒体查询告诉 "templatecolumnContainer" 在 480px 以下显示 100% 的屏幕宽度，但它只填充 50%。另一个列容器确实包裹在图像下方并拉伸视口的宽度。

这是媒体查询 -

@media only screen and (max-width: 480px) { 
.templateColumnContainer2 {
      display: block !important; 
      width:100% !important; 
      margin-left: auto !important; 
      margin-right: auto !important;
    } 
}

这是两列 -

    <table align="center" border="0" cellpadding="0" cellspacing="0" id="templateColumns" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: inline-block !important;padding-bottom: 15px;" width="750">
    <tbody>
        <tr>
            <td align="center" valign="top">
                <table align="left" border="0" cellpadding="0" cellspacing="0" class="templateColumnContainer2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: block !important;padding-bottom: 15px; padding-left: 15px;" width="360">
                    <tbody>
                        <tr>
                            <td class="leftColumnContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 21px; text-align: center;">
                                <img class="columnImage" src="image.jpg">
                            </td>
                        </tr>
                    </tbody>
                </table>
                <table align="right" border="0" cellpadding="0" cellspacing="0" class="templateColumnContainer2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: block !important;padding-bottom: 15px; padding-left: 15px;" width="360">
                    <tbody>
                        <tr>
                            <td class="rightColumnContent" height="200" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 18px; text-align: left; padding-left: 15px;" valign="top">
                                <h3 style="color: #606060 !important; display: inline; font-family: Helvetica; font-size: 16px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 16px; margin: 0;text-align: left;">Header</h3>
                                <p>Some paragraph text</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

如果有人可以填补我遗漏的任何编码空白，我将永远感激！！提前致谢。

Answer 1

这应该可以满足您的要求：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<style>
 @media screen and (max-width: 750px) {
  #templateColumns {
   width: 100% !important;
  }
  .templateColumnContainer2 {
   display: block !important;
   width: 100% !important;
   max-width: 100% !important;
  } 
 } 
</style>
</head>

<body width="100%" style="Margin: 0;">
    <center style="width: 100%;">
  <table cellspacing="0" cellpadding="0" border="0" align="center" width="750" style="margin: auto;" id="templateColumns">
   <tr>
    <td class="templateColumnContainer2" width="50%" valign="top">
     <table cellspacing="0" cellpadding="0" border="0" width="100%">
      <tr>
       <td class="leftColumnContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 21px; text-align: center;">
        <img class="columnImage" src="image.jpg" width="100%" height="auto">
       </td>
      </tr>
     </table>
    </td>
    <td class="templateColumnContainer2" width="50%" valign="top">
     <table cellspacing="0" cellpadding="0" border="0" width="100%">
      <tr>
       <td class="rightColumnContent" height="200" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 18px; text-align: left; padding-left: 15px;">
        <h3 style="color: #606060 !important; font-family: Helvetica; font-size: 16px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 16px; margin: 0;text-align: left;">Header</h3>
        <p>Some paragraph text</p>
       </td>
      </tr>
     </table>
    </td>
   </tr>
  </table>
 </center>
</body>
</html>

我不确定你上面有什么 parent HTML，但我包括了 <body> 和 <center>，并稍微重写了 <table> 标记 + 类以实现响应式布局，一旦视口低于 <table> 的桌面宽度 750px，就会堆叠。

两列响应式电子邮件媒体查询 - iPhone 不显示全宽表格

Two Column Responsive Email Media Query - iPhone Not Displaying Tables Full Width

iphone

html-email

responsive