Question

因此，我们有一些电子邮件可供用户订阅并发送。它们是HTML电子邮件，在（大多数）电子邮件客户端中看起来不错。但是一个问题是，如果您正在手机上收发电子邮件，则会收到弹出通知，而这些通知看起来有些废话。例如，电子邮件顶部有一个公司徽标，它出现在iOS上，通知中将包含“公司徽标” alt文本（至少在Gmail中如此）。

另一个问题是，靠近电子邮件顶部的是一个登录链接，这很重要，因为我们希望鼓励人们登录，但是当它出现在手机的弹出通知中时，这是浪费的空间。无论如何，您实际上无法从那里单击它！

是否有任何标签，属性或CSS可以控制iOS和Android上的通知中将显示或不显示什么？例如，如果您有类似的东西：

<div>
    <img src="http://somedomain.com/mycompanylogo.png" alt="My Company"/>
</div>
<div>
    <a href="http://somedomain.com/login">Click here to login!</a>
</div>
<div>
   <h2>Important alert title</h2>
</div>
<div>
   <!-- some important headline text that would be useful in the notification -->
</div>
<div>
   <!-- some more detailed stuff which would be fine not appearing in the notification -->
</div>

是否有一种方法可以至少暗示该图片已替换并显示“单击此处登录！”当用户收到我们发来的电子邮件时，该消息应该出现在弹出通知中吗？

Answer 1

所以你先声明

例如，电子邮件顶部有公司徽标，并且在iOS上显示，通知中将包含“公司徽标”替代文本（至少在Gmail中如此）。

要解决此问题，您将需要一个前置标题。前标头是隐藏的行，您将其放在HTML正文的最上方。这意味着电子邮件客户端会在获取其他内容（例如徽标上的alt标签）之前先阅读该内容。

<!--[if !mso]><!-->
<span style="display:none !important; visiblility:hidden; opacity:0px; color:transparent; height:0px; width:0px; mso-hide:all; max-height:0px; max-width:0px; line-height:0px; overflow:hidden;">Type your teaser content here.</span>
<!--<![endif]-->

在上面的预标题示例中，您可以看到许多不同的情况。首先，我们有片段。这将确保在此语句与语句之间包含的所有内容都不会在Microsoft客户端中呈现。之所以如此，是因为Outlook对CSS的支持有限。

接下来，我们有一个带有各种CSS元素的span标记，以将内容隐藏在其中。然后，span标记中将包含您想要显示在电子邮件客户端预览中的内容。

对于移动设备上出现登录链接的问题-您将要使用CSS Media queries。这些可以检测将在其上查看电子邮件的设备的宽度，您可以相应地应用样式。这是我用来隐藏您的登录链接的示例。但这不会阻止客户端阅读链接，因此仍然建议使用预标题。

<head>
   <style>
      @media screen and (max-width: 630px) { //Selecting devices less than 630px
          .hide_on_mobile {display: none !important;} //Hiding anything that has the hide_on_mobile class
      }
   </style>
</head>
<body>
...
  <div class="hide_on_mobile"><!--Added the hide on mobile class-->
     <a href="http://somedomain.com/login">Click here to login!</a>
  </div> 
...
</body>

我确实建议对电子邮件CSS支持进行更多研究，因为与网络不同，我们确实没有标准，这有点奇怪。对于各种电子邮件客户端，Campain Monitor确实具有不错的CSS support guide。

Answer 2

您可以创建类和@media查询来为您提供一些这种功能。这个概念是阻止一切，除非它满足您的媒体查询。

<style>
.outlook, .ios, .mobile, {
  display: none !important;
}
.desktop {
  display: block !important;
}
@media only screen and (max-width: 414px) {
  .mobile {
    display: block !important;
  }
  .outlook, .ios, .desktop, {
    display: none !important;
  }
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .ios {
    display: block !important;
  }
  .outlook, .desktop, .mobile, .ipad {
    display: none !important;
  }
  .desktop {
    display: none !important;
  }
}
</style>
<!--[if mso]>
<style type="text/css">
.outlook {
  display: block !important;
  font-size; 16px;
}
.ios, .mobile {
  display: none !important;
}
.desktop {
  display: none !important;
}
</style>
<![endif]-->

在这里，您可以创建带有类的消息，以向每个设备发送自定义消息。

<p class="desktop" style="display: none;">You're using a desktop device.</p>
<p class="mobile">You're using a mobile device.</p>
<p class="ios" style="display: none;">You're using an IOS device.</p>
<p class="outlook" style="display: none;">You're using Outlook.</p>

收件人在收到邮件时会收到一条自定义消息。

有一些警告。创建后，此消息将在宽414像素的iPad上显示“这是台式设备”。您可以微调，但是我懒得自定义。它将不适用于Android设备，因为它们不使用@media查询，并且您无法像IOS或Outlook那样将它们作为目标。最后，如果您在IOS设备上使用Gmail，则可能需要进一步微调。

这至少为您提供了一种方法，可以通过一封电子邮件来定位设备，这对于指导用户进行设备特定的更新可能很有用。

JsFiddle：http://jsfiddle.net/wallyglenn/0mokhayq/

祝你好运。

格式化电子邮件以获得最佳的通知外观

2 个答案: