邮件响应式测试预览 - 多客户端模拟

邮件客户端（尤其是Outlook 2007-2019）使用Microsoft Word的渲染引擎，它对CSS的支持非常有限。table布局是保证在Outlook中正常显示的最可靠方式。此外，table布局在邮件被转发时结构更稳定，不会像div+CSS那样容易被破坏。推荐使用嵌套table来实现复杂布局，外层table设置固定宽度（通常600px），内层table处理具体内容。

Gmail：支持大部分CSS2属性，但会移除<style>标签中不支持的属性。支持@media查询（在head中），但会过滤部分选择器。
Outlook桌面版：使用Word引擎，不支持flexbox、grid、border-radius、box-shadow、CSS动画等。建议使用内联样式和table布局。
Apple Mail：支持度最好，类似Safari浏览器，支持大部分现代CSS属性。
Yahoo Mail：会剥离部分CSS属性，对外部样式表支持有限。

内联样式是直接写在HTML元素的style属性中的CSS声明。邮件客户端（尤其是Gmail和Outlook）经常剥离<style>标签或外部样式表。使用内联样式可以确保样式不被移除。专业邮件工具通常会自动将CSS转换为内联样式。例如：<td style="padding:10px;font-size:14px;color:#333;">内容</td>。

绝对不可以。所有主流邮件客户端都会自动移除或屏蔽JavaScript代码。出于安全考虑，邮件中的<script>标签、事件处理属性（onclick、onload等）都会被过滤掉。邮件应该完全是静态的HTML内容。如果需要动态交互，应该引导用户点击链接到网页上进行操作。

1. 使用百分比宽度：让table和图片使用百分比而非固定像素。
2. 媒体查询：在<style>中使用@media针对小屏幕调整布局（注意Outlook会忽略）。
3. 单一列布局：移动端自动转为单列，宽度100%。
4. 字体大小：正文至少14px，标题适当增大，确保移动端可读。
5. 按钮大小：触摸目标至少44×44px。
6. 图片处理：使用max-width:100%确保图片不超出容器。

1. 使用绝对URL：图片必须托管在服务器上，使用完整的https链接。
2. 添加alt属性：许多客户端默认不加载图片，alt文本会在图片被屏蔽时显示。
3. 控制大小：单张图片不超过1MB，总邮件大小控制在100KB以内。
4. 避免Base64：多数客户端不支持Base64编码的内嵌图片。
5. 使用标准格式：JPEG、PNG、GIF最安全，避免SVG和WebP（支持有限）。

Outlook使用Word渲染引擎，存在诸多限制：
• 不支持border-radius、box-shadow、text-shadow
• 不支持flexbox和grid布局
• padding和margin在部分元素上表现异常
• 背景图片支持有限（VML可解决但复杂）
• line-height解析与浏览器不同
• 建议使用<!--[if mso]>条件注释针对Outlook添加特殊样式。

本工具提供了6种客户端模拟视图：Gmail桌面、Outlook桌面、Apple Mail桌面以及对应的移动端版本。点击预览区顶部的客户端标签即可切换。预览窗口会模拟对应客户端的视口宽度和UI风格。您还可以使用设备切换按钮强制以桌面或移动端视图查看。编辑代码后预览会实时更新，检测区会自动提示潜在的兼容性问题。