您应该为 HTML 电子邮件通讯使用的最大宽度是多少？答案

【问题标题】：What is the max width you should use for an HTML e-mail newsletter?您应该为 HTML 电子邮件通讯使用的最大宽度是多少？
【发布时间】：2011-10-24 12:12:40
【问题描述】：

我想知道，因为我看到了很多不同的答案。最终我认为 500-600px 就可以了。特别是如果您正在构建以匹配 Hotmail、Gmail、Outlook、Mail.app 等的标准。

但我想听听其他人对此事的看法。是否有适合开发电子邮件通讯的固定尺寸？这里说的是用 HTML 表格构建模板。

【问题讨论】：

标签： html html-table html-email newsletter

【解决方案1】：

IMO 你不应该设置宽度。我和许多其他人一样，倾向于在手机上查看我的电子邮件。拥有智能手机的用户数量正在增长；也使用手机查看电子邮件的用户数量也是如此。

您永远不知道用户的分辨率是多少。如果您希望他们实际阅读您的信息，而不仅仅是删除它，因为它会导致烦人的水平滚动，如果可能的话，最好避免设置宽度。

【讨论】：

感谢这是一个非常好的提示。我没有考虑过智能手机的电子邮件，但你是对的——它很大。

【解决方案2】：

出于查看目的，请将您的 Windows 分辨率（或 Mac 分辨率）更改为尽可能小。看看它是什么样子的。虽然，我会坚持使用 800x600 的网站基线分辨率。我认为这也适用于以 HTML 格式发送的电子邮件。

如果您想让您的时事通讯以 HTML 格式打印（到物理打印机），我会在页面打印时为不同的浏览器使用不同的样式表，并将媒体属性翻转为“打印”。然后，它的外观会有所不同，具体取决于应用样式的时间以及最终用户是将页面打印到物理打印机还是以 HTML 格式查看。用不同的浏览器彻底测试。我在不同的浏览器中看到了打印预览打印比例变化的奇怪行为。有时规模不会持续存在。谷歌浏览器是使打印比例准确的最差的。它们有利于性能和风格始终如一，但在发送到打印机时却很差。在 IE 9 中，打印比例默认值不会保留。在某些版本的 Mozilla 中，您需要将比例强制为 125%（或实际上不是 100%），然后再强制为 100%，然后才能真正变为 100%。我不会详细介绍，但是这个 sn-p 代码将让您开始了解如何使用 media 属性。打印比例“缩小以适合”是您最大的敌人。如果浏览器支持 CSS3，那么您就有更多选择，可以更好地控制您的时事通讯的打印方式！

示例：

<style type="text/css" media="all">
    .printPage { height:100%; width:100%; position:relative; }
</style>

<style type="text/css" media="print"> 
    .printPage { height:8.5in; width:100%; position:relative; }
</style>

如果您想要页面中的页眉/页脚，这里有一个很好的代码 sn-p：

<html>
<head>


<style type="text/css" media="all">
thead { display: table-header-group; vertical-align:top; }
tfoot { display: table-footer-group; vertical-align:bottom; }
.printPage { height:11.5in; }
</style>

<style type="text/css" media="print">
.printHeader { display: table-header-group; vertical-align:top; }
.printFooter { display: table-footer-group; vertical-align:bottom; }
.printPage { height:100%; }
</style>

</head>
<body>
<table class="printPage">
   <thead class="printHeader"><tr><td>Your header goes here</td></tr></thead>
   <tbody>
     <tr><td>
     Page body in here -- as long as it needs to be
     </td></tr>
   </tbody>
   <tfoot class="printFooter"><tr><td>Your footer goes here</td></tr></tfoot>
</table>
</body>
</html>

【讨论】：

问题是关于在 HTML 中的时事通讯/电子邮件中的最大使用量，而不是打印。