在移动设备上的电子邮件预览中隐藏 HTML 横幅

Question

我有一个 HTML 横幅，用于从外部发件人进入我们环境的电子邮件。测试后发现，横幅会阻止用户在移动设备上预览收到的电子邮件。我对 HTML 或 CSS 的了解为零。我所拥有的是从零星拼凑而成的。我正在阅读的当前文章告诉我使用以下代码：

<style type="text/css">
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){  .mobileHide { display: none;}}
</style>

我已将 HTML 更改为：

<html><head><style type="text/css">
.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){  .mobileHide { display: none;}}
</style></head><body><div class="mobileHide"><table style="border: 1px 
solid black;border-collapse: collapse">
<tbody>
<tr bgcolor="#ffac59">
<td>
<small>CAUTION: This is a test.</small>
</td>
</tr>

</tbody></table><h1></h1>
<br />
<mc type="body">

</div></body></html>

有人可以指出我做错了什么吗？

Answer 1

我能看到的一件事是您的样式属性中有错别字：

<div class="”mobileHide”">

...有两个双引号。应该是这样的：

<div class="mobileHide">

Answer 2

一些桌面电子邮件客户端也会显示电子邮件预览文本，因此任何仅在移动客户端上删除 header 的解决方案都会给桌面客户端留下您试图解决的相同问题。直接使用预览文本而不是针对移动客户端更有意义。

要在电子邮件中获取自定义预览文本，它必须是出现在电子邮件 body 部分中的第一个文本，甚至在 header.

之前

From litmus.com:

Preview text is pulled from the first few lines of text found within an email.

所以发生的事情是电子邮件客户端正在阅读您电子邮件的前几行以确定显示什么作为预览文本，但是由于您的 header 是第一行，因此电子邮件的预览文本是乱码从 header 部分而不是市场营销说出你想要的。据我所知，电子邮件预览的解析不受 CSS 样式（例如 display: none）的影响，尽管我对此可能是错误的。

Litmus 建议您在电子邮件 header 之前添加一个额外的隐藏元素（就在开始 body 标签之后），其中包含您要在电子邮件客户端。您需要使用此代码：

<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
  Insert preview text here.            
</div>

它并不漂亮，但电子邮件 HTML 本身并不漂亮。这样做的目的是在您的电子邮件顶部创建一个隐藏元素，客户端将显示为预览文本，但在最终用户打开电子邮件时不会实际显示给他们。

在您的情况下，您可能希望以编程方式从收到的电子邮件中提取此预览文本，然后在应用 header 之前应用此元素。

这是否构成垃圾邮件或误导行为？它会损害您的交付能力吗？ Litmus 表示，根据他们的经验，这很好：

Using hacks like this to hide content occasionally brings up concerns about deliverability. Our experience has been that, used sparingly and alongside an otherwise clean sending reputation, this works quite well.

在移动设备上的电子邮件预览中隐藏 HTML 横幅

Hide an HTML banner from preview of email on a mobile device

html

css

email

html-email