我有一个测试布局,它使用表格显示两列和媒体查询,它们将两列叠加到支持媒体查询的电子邮件客户端上.我坚持使用表而不是div,因为我们还需要支持Outlook :(.布局在
Android 4.3及以下版本中工作得很好(列叠加)但在Nexus 5(Android 4.4.2)上爆炸.两列第二列完全被挤压后仍然显示在彼此旁边.似乎4.4.2不支持td的显示块.有没有其他人经历过这个？如果是的话,有没有解决这个问题？顺便说一下,看起来只有显示块和显示：Nexus 5不支持内联块,如果我在我的媒体查询中将tds设置为display：none,它们将隐藏在屏幕上.下面是一个基本的html电子邮件模板,它没有工作：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<Meta name="viewport" content="initial-scale=1.0;width:device-width">
<!-- So that mobile webkit will display zoomed in -->
<title>Email template</title>
<!-- disable auto telephone linking in iOS -->
<Meta name="format-detection" content="telephone=no">
<style type="text/css">
@media screen and (max-width:640px) {
table[class="container"] {
width: 100%!important;
}
td[class="cell"] {
background-color: #cc3333;
width: 100%!important;
display: block!important;
}
}
</style>
</head>
<body>
<table width="640" align="center" cellpadding="0" cellspacing="0" class="container">
<tr>
<td class="cell">Hello world</td>
<td class="cell">Hello world</td>
</tr>
</table>
</body>
</html>
编辑1/14因此使用表作为块元素可以正常工作.由于表是浮动的(使用对齐),因此在宽度小于640px的情况下进行包装.现在唯一的问题是,当两个表换行时,由于它们的宽度设置为320px,文本在原始分辨率超过320px但小于640px的设备上不会回流到100％(比如iPhone在横向模式下为480px )而是包裹在320px(在右边留下大约160px的空白区域).我知道我可以使用媒体查询更改宽度,但遗憾的是它不适用于Gmail应用程序(grrh).有什么想法/建议？简单的桌面结构 –
<table align="center" style="width: 640px;max-width:100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table align="left" style="width:49%;" border="1">
<tr>
<td style="max-width: 100%">long text which should take about 480px
</td>
</tr>
</table>
<table style="width:49%;max-width: 100%" align="left">
<tr>
<td style="width:100%;">long text which should take about 480px
</td>
</tr>
</table>
</td>
</tr>
</table>
解决方法
我认为,最好只使用表格为你的CSS样式,因为td标签更难以预测
你可以在这里找到一个很好的2列布局示例：
http://www.campaignmonitor.com/guides/mobile/responsive/