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

我能看到的一件事是您的style属性中有一个错字：

<div class="”mobileHide”">

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

<div class="mobileHide">

Answer 2

某些桌面电子邮件客户端还会显示电子邮件预览文本，因此，仅在移动客户端上删除标头的任何解决方案都将使桌面客户端遇到与您要解决的问题相同的问题。直接定位预览文本比使用移动客户端更有意义。

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

From litmus.com：

预览文本是从电子邮件中找到的前几行中提取的。

因此，正在发生的情况是，电子邮件客户端正在阅读电子邮件的前几行以确定要显示为预览文本的内容，但是由于您的标题是头，因此电子邮件的预览文本是标题部分的乱七八糟，而不是营销说话，你想要它成为。据我所知，电子邮件预览的解析不受display: none这样的CSS样式的影响，尽管我对此可能是错误的。

Litmus建议您执行的操作是在电子邮件标题之前（在打开的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本身并不漂亮。这样做是为了在电子邮件的顶部隐藏一个元素，客户端将以预览文本的形式显示该元素，但最终用户打开电子邮件时实际上不会显示该元素。

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

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

偶尔使用此类黑客隐藏内容会引起人们对可传递性的担忧。我们的经验是，这种做法很少使用，并且在发送信誉方面也很整洁，效果很好。

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

2 个答案: