问题描述
我必须向各种接收者发送(复杂的)html 邮件,并拼命尝试使其适用于各种电子邮件客户端(至少是 Outlook、iOS 和 gmail)。
我现在有一个适用于 Outlook 和 iOS 的版本,但不适用于 Gmail (Android)。
简短说明:
标题中定义了各种 css 样式和媒体查询。
css 类 conttext(见下面的截图)定义了字体系列、字体大小等..
css 类 conttextboldblue(见下面的截图)设置属性: color: #0000FF; (蓝色)字体粗细:粗体;
类上下文设置为 td 元素并适用于任何平台。
类 conttextboldblue 设置在 td 的 span 中,适用于所有平台(包括我用于测试的 GC)gmail 除外。
如果我设置样式内联(下面截取的最后一行),它可以在gmail中使用,但所有其他客户端丢失在上下文中设置的样式(字体系列、字体大小等等)。
正如我上面所说,这是一封庞大而复杂的电子邮件,我不想删除所有 css 样式并将任何内容置于内联(此外,我还需要媒体查询)。
我已经在互联网上搜索过,并且只发现 - 如果定义了 td 的 css 样式,则在 gmail 中删除所有其他 css 样式... :-(
而且..似乎确实如此......
因此我的问题:
- 有没有人有办法让它也能在 Gmail 中使用?
感谢您的提示!
代码剪断:
<td><span class="conttext"><br>
Some text <strong>some strong text</strong> mit <strong>some strong text</strong> some text<br>
<br>
Some text <br>
</span>
<span class="conttextboldblue">This text is NOT (only in gMail) not formatted -> conttextboldblue is just ignored</span><br>
<span style="color:blue; font-weight:bold;">This text is formatted but all other clients (iOS und Outlook) lose the formats defined in conttext!</span><br>
解决方法
并非所有版本的 Gmail 都相同,也并非所有版本都支持 <style>
元素。特别是,如果您使用第三方电子邮件地址(例如 @outlook.com
地址)在 Gmail(Android 或 iOS)中进行测试,您将无法获得对 <style>
的支持,并且只有内联样式可以使用那里。 (我写了 a blog post about Gmail CSS support here。)
Gmail 客户还因对任何格式错误的 CSS 挑剔而闻名,如果他们看到不喜欢的内容,就会删除整个 <style>
标签。例如,使用 @media { @font-face { … }}
之类的规则将使 Gmail(所有客户端)删除包含这些规则的整个 <style>
元素。 (但请随意发布您的整个代码,以准确获得有关此的详细反馈。)
出于这些原因,在 HTML 电子邮件中内联您的样式通常被认为是最佳做法。
,现在我的发现...
一般来说:
我们的 html 电子邮件包含图像(带链接)、特殊格式的文本(粗体、蓝色、红色)表格、项目符号、内部链接,并且必须发送给大约 12k 收件人,我们不知道他们会在什么设备上阅读电子邮件。
几年前,我们仅针对桌面(Outlook)优化了类似的电子邮件。这些时代肯定已经结束了 - 我们必须预计,超过 50% 将在移动设备上阅读电子邮件(这是事实)。
创建这样的电子邮件非常复杂且耗时,至少可以在桌面 (Outlook) 和移动设备(iOS(iOS 邮件应用)和 Android (gmail))上毫无问题地阅读。
注意到的(主要)问题(针对我的特定 html 电子邮件):
- Outlook 需要更小的字体大小和固定宽度的表格以及图像以使其看起来正常
- Outlook 还需要对项目符号进行特殊设置,这与移动客户端不兼容。
- Outlook 和 iOS(以及任何浏览器,例如 Google Chrome)尊重 css-stiles(设置为“class=”)和媒体查询 - 我还没有找到将其与 gmail 结合使用的方法。对我来说,似乎 gmail 在打开电子邮件后删除了所有 css 设置(也许有一种方法可以让它发挥作用,但经过几天的尝试和错误,我放弃了)。唯一有效(对我而言)是将样式(style =)直接应用于 html 元素。如果发现一些信息表明它也适用于 gmail,但有(大量)限制https://litmus.com/community/discussions/8098-media-queries-support-for-android-gmail-app-2019-verison
- 移动客户端需要一个视口条目并将图像和表格设置为 100%,否则电子邮件会自动缩放为不阅读“微字体”(用户必须缩放才能阅读文本)
- 内部链接适用于 Outlook 和 Android,但不适用于 iOS(否则 iOS 对 css 有很好的支持,并且行为应该如此)
我还没有找到真正的“解决方案”,而是(仅)一个解决方法。
视口条目:
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
在样式标签中,它设置了所有 for Outlook css(图像和表格的宽度、字体大小和项目符号的“特殊”设置(错误强>适用于移动客户端)。
ul,ol{margin-left: 20px !important;}
li {text-align:-webkit-match-parent; display:list-item;text-indent: -1em; margin-top: 5px;}
然后我在媒体查询中设置或 iOS 手机的基本设置
@media screen and (max-width: 1024px) {
/* Reset Spezialeinstellungen Outlook für alle Mobiles*/
ul,ol {margin-left: 0px; }
li {text-align:left; display:list-item;text-indent: 0px; margin-top: 0px;}
.HauptTabelle {
width: 100% !important;
}
这将重置最大宽度为 1024 像素的所有 iOS 客户端的 Outlook 特殊设置。
然后我为各种 iOS 设备设置了 css - 示例:
/*IPhone 6/7/8: 375px */
@media screen and (max-width: 375px) {
.conttext {
font-size: 20px !important;
line-height: 22px !important;
}
.Headline0Boldleft {
font-size: 20px !important;
line-height: 22px !important;
}
.headline {
font-size: 20px !important;
line-height: 22px !important;
}
.headtext {
font-size: 20px !important;
line-height: 22px !important;
}
.conttextboldblue {
font-size: 20px !important;
line-height: 22px!important;
}
.conntextbold {
font-size: 20px !important;
line-height: 22px !important;
}
}
然后,除了直接设置为 html 元素之外,我还为 Android (gmail) 设置了属性。
示例:
<td style="color: #0000FF; font-weight: bold; border: 2px solid #FF0000; padding:4px !important;" class="style1"><span class="conttextboldblue">Some text... and further code...
在这个例子中,我将字体颜色设置为红色、粗体和边框。
注意:在 style1(边框和填充)和 conttextboldblue 类中定义了相同的内容。
所以...我设置了 double 属性(在 css 类中按时内联 Style= 和 onetime)。
Android (gmail) 仅尊重“style=”,因此 iOS 优先采用 css 样式。
所以我可以在媒体查询中为 iOS 定义更多的样式(例如字体大小)。
Android (gmail) 似乎会自动应用“可用”字体大小。
如上所述,这不是解决方案,而是针对我的案例的解决方法。
如果我将来有更多的 html 邮件要发送(事实并非如此),我会投入(很多)更多时间来寻找真正的解决方案...
进一步提示:
在此处验证您的 html 代码:
https://validator.w3.org/#validate_by_upload
注意:该工具将双重分配的样式(内联和带有 css)显示为错误,但它仍然有效
注意,你有正确的注释来注释行:
CSS:
/* Your comment */
HTML:
<!-- Your comment -->
(我的编辑器已将 css 中的行注释为 html 注释,这让我花费了一些时间,直到我注意到这一点......)
在 Google Chrome 中加载您的 html 电子邮件,按 F12(调试模式)并在那里检查(特别是如果您的 html 中有媒体查询)。
如果您有媒体查询而 GC 没有显示,则说明您的代码有问题。
使用 GC,您可以轻松模拟移动设备并查看是否正确应用了媒体查询。
我希望这对某人有所帮助...