Question

我正在测试一个简单的响应式HTML电子邮件，它应该通过NPrinting扩展从Qlikview服务器发送。我正在使用Putsmail测试HTML模型，并且已经在我自己的手机上成功测试了它（Sony Xperia Z3 Compact），完全符合下面的代码。

但是在我同事的手机上（某些三星运行的是Android 2.3.6），响应性不再起作用 - 它只是忽略了媒体查询并显示了彼此相邻的两个表（而不是按预期显示在彼此之下在小于600px的屏幕上。

请注意，该部分中的其他表边框颜色CSS仍适用于我同事的手机。

有什么建议吗？

注意：如果我改变

max-width: 599px

至

max-device-width: 599px

媒体查询不再适用于我的手机了。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<style type="text/css">
		@media only screen and (max-width: 599px) {
			.responsive_table {
				display:block;
				width:300px;
			}
		}
		td {border: 1px solid #00f;}
		.responsive_table td {border: 1px solid #f00;}
	</style>
</head>
<body>
This table should have 1 row and 2 columns on big screens.<br>
It should have 2 rows with 1 column each on mobile devices.

<table width="100%">
	<tr>
		<td>
			<table align="left" class="responsive_table">
				<tr>
					<td>Left</td>
				</tr>
			</table>

			<table align="right" class="responsive_table">
				<tr>
					<td>Right</td>
				</tr>
			</table>
			
		</td>
	</tr>
</table>
</body>
</html>

防弹响应式HTML电子邮件

0 个答案: