如何让HTML邮件模板在电脑端与移动端保持相同最大宽度？

邮件模板的兼容性要求特殊，普通div布局在邮件客户端（尤其是Outlook这类旧客户端）里支持很差，要实现桌面端和移动端宽度一致，得用表格布局+内联样式的标准邮件开发方案，具体实现如下：

核心实现步骤 #

• 用表格作为最外层容器，设置固定宽度（比如和移动端适配的375px），同时添加max-width: 375px和margin: 0 auto，确保桌面端容器居中且不被拉宽。
• 所有邮件内容放在表格的单元格内，避免内容溢出容器。
• 图片必须设置max-width: 100%; height: auto;，防止图片撑宽容器。

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>适配邮件模板</title>
    <!-- 媒体查询作为补充，针对支持的客户端强化效果 -->
    <style>
        @media only screen and (min-width: 600px) {
            .email-container {
                width: 375px !important;
                margin: 0 auto !important;
            }
        }
    </style>
</head>
<body style="margin: 0; padding: 0; background-color: #f5f5f5;">
    <!-- 外层容器表格，兼容所有邮件客户端 -->
    <table class="email-container" width="375" cellpadding="0" cellspacing="0" border="0" style="max-width: 375px; margin: 0 auto; background-color: #ffffff;">
        <tr>
            <td style="padding: 20px;">
                <!-- 示例图片 -->
                <img src="你的图片URL" alt="邮件内容图" style="max-width: 100%; height: auto; display: block;">
                <!-- 示例文本 -->
                <p style="margin: 16px 0; font-size: 14px; line-height: 1.6;">这里是邮件正文内容，所有元素都会被限制在375px宽度内...</p>
            </td>
        </tr>
    </table>
</body>
</html>

关键注意事项 #

• 表格布局是必须的：Outlook等旧客户端不支持div的max-width属性，表格是邮件模板的兼容性基础。
• 内联样式优先：大部分邮件客户端会忽略内部/外部样式表，所以宽度、边距、图片样式这些关键属性必须写在元素的style属性里。
• 固定宽度+最大宽度双设置：width="375"是给不支持max-width的旧客户端做降级，max-width: 375px确保现代客户端不会把容器拉宽，margin: 0 auto让桌面端容器居中，和你想要的示例效果匹配。

内容的提问来源于stack exchange，提问作者Xezbeth