已关闭。此问题需要更多focused。目前不接受回答。
**要改进此问题吗？**更新此问题，使其仅针对editing this post的一个问题。
9天前关闭
Improve this question的
我很好奇，如果有人有任何建议如何创建电子邮件安全/友好的传出HTML？
我知道有各种规格发送HTML电子邮件，并有良好的准确性，在身体时，收到的客户端。
我尝试发送各种传出的HTML电子邮件测试，但接收客户端的身体并不总是准确地显示预期。
一些问题似乎是有问题的是，各种电子邮件客户端无论是移动的第一- PC或Mac或Linux等似乎显示不同的身体-和标题标签-媒体查询和对齐不是我想要的。
- 有人说，例如，Gmail可能无法正确反映标题标签，如媒体查询和/或样式等工作是否正确-Gmail更喜欢内嵌样式，而不是.？
问：有没有什么方法可以最大限度地减少这些问题，使发出的HTML电子邮件的主体将在很大程度上反映我最初的选择？
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- other code here -->
<style>@media only screen and (max-width:480px) {
.button_content-cell {
padding-top: 10px !important; padding-right: 20px !important; padding-bottom: 10px !important; padding-left: 20px !important;
}
.button_border-row .button_content-cell {
padding-top: 10px !important; padding-right: 20px !important; padding-bottom: 10px !important; padding-left: 20px !important;
}
}
</style>
<!-- other code here -->
</head>
<body>
<!-- other code here -->
</body>
</html>字符串
1条答案
按热度按时间wbgh16ku1#
作为前端开发人员，我们臭名昭著的任务之一是在所有邮件客户端中提供看起来与提供的设计完全相同的HTML电子邮件：D.我必须在这里写一个答案，因为我最近被要求优化我们团队用于编译HTML电子邮件的React组件库，以完全支持Outlook 2016。
的确，每个邮件客户端在呈现HTML的方式上都会有很小（或很大！）的差异。例如，Apple Mail和Gmail对HTML和CSS规范的支持非常广泛，因此浏览器和邮件客户端中HTML的呈现方式之间存在相当大的一致性。
另一方面，Outlook使用Word渲染引擎来渲染HTML，因此，它有一种非常不同的方法来获得与其他邮件客户端相同的外观（这也是为什么它是每个电子邮件设计师的噩梦）。
我通常会建议坚持HTML表格和内联CSS的几乎每一个组件，你在你的电子邮件-他们支持和给予一致的呈现在大多数邮件客户端。
Can I email是一个很有用的工具，可以用来检查我将要引入的代码在我们的目标邮件客户端中是否受支持。例如，如果你的代码中有使用圆角的元素，你会发现Windows Outlook客户端不支持
border-radius属性：x1c 0d1x的数据
在我确保我的源代码得到每个目标邮件客户端的支持之后，或者在将我的.html文件发送给下一个团队之前，它有针对特定邮件客户端（如Outlook）的回退代码，我最好想知道HTML如何在每个目标邮件客户端中呈现。
有很多工具可以实现这一点，我还没有全部使用过，但是SendGrid对我来说非常有效。通过在email API中创建一个动态模板，你可以粘贴HTML代码并在很多邮件客户端上运行测试渲染（这只是其中的一部分）：
的
例如，您可以选择Apple Mail和Outlook 2016客户端，并为这些客户端生成渲染：
的
一旦我可以验证我编译的HTML代码与请求的设计匹配，我就可以安全地发送文件。
在创建和设计交叉兼容的HTML电子邮件时，增强工作流的一个小技巧是使用像Astro这样的框架，在那里你可以编写可重用的组件-这使得事情变得特别容易，因为你可以将每个组件的代码隔离到一个单独的文件中，并致力于使特定的组件交叉兼容。
然后，您可以创建一个新的页面作为您的电子邮件模板，只需按原样导入每个组件，而不必担心在不同的邮件客户端中正确显示它。将您的项目构建为static .html！
您可能还会发现这些文章在解决Outlook的常见问题时非常有用：