我正在尝试构建一个 html 电子邮件，它可以缩放以适应移动屏幕，而无需用户水平滚动。我试过使用...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
并将正文宽度设置为 100% - 但似乎都不起作用。还有其他建议吗？
这是我的完整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">.ExternalClass .ecxReadMsgBody{width:100%;} .ExternalClass{width:100%;} body{margin: 0; padding: 0;} </style>
</head>
<body style="background: #dfdfe0; width:100%;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="background: #dfdfe0;color: #37383a;margin: 0px;width: 100%;" width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="576">
<tr>
<td colspan="2"></td>
<td colspan="34" style="background-color: red;" bgcolor="red"><img width="522" src="header2.png"></td>
<td colspan="2"></td>
</tr>
<tr> <!-- Start of the email grid -->
<td width="9"></td>
<td width="18" height="10" style="background-color: red; height: 10px;" bgcolor="red"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="9"></td>
<td width="9"></td>
<td width="27"></td>
<td width="18" style="background-color: red;" bgcolor="red"></td>
<td width="9"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
非常感谢!
编辑
请注意，我也将列数减少到 5，但我仍然得到相同的结果
最佳答案
您的表格宽度以像素 (576px) 为单位设置，大于手机屏幕尺寸。你可以使用 media query (responsive design)禁用或调整桌面版本以适应移动屏幕，否则您需要使用 fluid design .
限制是媒体查询在 Gmail 中不起作用，因为您不能内联它们。流体仅适用于单列布局。
关于android - 缩放 html 电子邮件以适应移动屏幕而无需滚动(android/iOS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14871937/