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

【问题标题】：Two Column Responsive Email Media Query - iPhone Not Displaying Tables Full Width两列响应式电子邮件媒体查询 - iPhone 不显示表格全宽
【发布时间】：2016-07-06 23:28:08
【问题描述】：

我正在尝试使用电子邮件的媒体查询创建响应式两列行（在表格中）。使用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>

如果有人能填补我遗漏的任何编码空白，我将不胜感激！提前致谢。

【问题讨论】：

你所拥有的应该可以工作。我怀疑您在桌子上的其他一些样式会干扰它。尝试删除部分或全部内联样式，看看是否可以修复它，然后一点一点地添加回来。抱歉，我现在没有时间亲自测试。

标签： iphone html-email responsive

【解决方案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>

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

【讨论】：

上述解决方案仅适用于 iPhone。 Android 和 Gmail 应用将继续并排显示内容。
我知道，我相信这就是问题所要求的。
对迟到的 +1 Ted 感到抱歉，但这就像一个魅力！非常感谢你，希望这篇文章能帮助其他任何因电子邮件开发工作而感到压力的人。