HTML 电子邮件 iOS 格式检测答案

【问题标题】：HTML Email iOS format-detectionHTML 电子邮件 iOS 格式检测
【发布时间】：2015-03-17 14:49:51
【问题描述】：

我刚刚发现有一个元标记用于将电话号码作为链接删除在 iOS 上的 HTML 中。这适用于 HTML 电子邮件吗？

<meta name="format-detection" content="telephone=no">

但是地址和日期也有吗？我一直在写技巧来克服这个问题，但如果它是一个很棒的元标记！有人知道地址和日期的语法吗？

【问题讨论】：

标签： html html-email

【解决方案1】：

我认为最好将它们收集在一个元标记中：

<meta name="format-detection" content="telephone=no, email=no, address=no" />

【讨论】：

【解决方案2】：

这不是标准的元标记，它只适用于 IOS。

请参阅Apple Developer Documention 以找到您的答案

【讨论】：

【解决方案3】：

我刚刚发现格式检测不适用于 Outlook.com、Office365 等。

在我的例子中，我不想要自动样式或功能（点击调用或映射地址），所以我注入了一些隐藏的 HTML 让它看起来不像一个地址。

原文：

<td>123 Main Street
<br/>Cambridge, MA 02138</td>

更新：

<td>123 Main S<i class="hidden">-</i>treet
<br/>Cambridge, M<i class="hidden">-</i>A 02<i class="hidden">-</i>138</td>

将此添加到您的样式表中：

.hidden { display:none; }

这已经过测试，并且可以在 Acid 上的 Email 提供的 50 个左右的电子邮件客户端预览中使用。

注意：您不能内联 display:none，因为 Yahoo Mail 不支持该功能，您的地址中会出现可见的破折号。你需要定义一个类。

移除显示但保留功能

如果您想保留 Bing 地图弹出功能，您可以通过将类“outlookLink”添加到包含地址的元素来自定义显示。来源：https://litmus.com/community/discussions/4692-outlook-com-adding-links

所以这个：

<td>123 Main Street</td>

变成这样：

<td class="outlookLink">123 Main Street</td>

在您的样式表中添加以下内容：

.outlookLink span {
      color:#ffffff !important;
      border-bottom-width:0 !important;
      border-bottom-style:none !important;
}

Outlook.com 将其确定为地址或日期（用于日历条目）的内容包装在具有自己样式（带有虚下划线的蓝色链接）的中。这会修改那些 s.

的样式

【讨论】：

【解决方案4】：

<html>
<head>
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="date=no">
    <meta name="format-detection" content="address=no">
    <meta name="format-detection" content="email=no">
    <style type="text/css">
        a[x-apple-data-detectors] {
            color: inherit !important;
            text-decoration: none !important;
            font-size: inherit !important;
            font-family: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
        }
    </style>
</head>
<body>
    123 Main Street<br/>
    Columbus, Ohio 43215
</body>
</html>

【讨论】：

我刚刚在处理一封电子邮件时遇到了这个问题。事实证明，这种努力几乎是徒劳的，因为除了 IOS 之外还有其他设备在进行这种类型的检测和转换。我希望浏览器/设备可以选择关闭这种类型的检测（如果没有的话），这样我们的开发人员就不会花费大量时间来研究解决方案！

【解决方案5】：

我很幸运：

<style>
  a[href^="x-apple-data-detectors:"] {
    color: inherit;
    text-decoration: inherit;
  }
</style>

【讨论】：

第一次在 css 中遇到 ^= 可以分享一下它在做什么吗？
@user471651 和 js 中的正则表达式一样，a[href^="x-apple-data-detectors:"] 表示匹配a 属性值以x-apple-data-detectors: 开头的标签

【解决方案6】：

未经测试，但应该可以工作。

a[href^=date]{ color:#FFFFFF; text-decoration:none;}
a[href^=telephone]{ color:#FFFFFF; text-decoration:none;}
a[href^=address]{ color:#FFFFFF; text-decoration:none;}
a[href^=email]{ color:#FFFFFF; text-decoration:none;}

【讨论】：

【解决方案7】：

是的，有。您可以使用：

日期：<meta name="format-detection" content="date=no">
地址：<meta name="format-detection" content="address=no">
邮箱：<meta name="format-detection" content="email=no">

组合它们：

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no">

【讨论】：

请注意 - 这仅适用于原生 iOS 和一些 Android 电子邮件客户端，而不适用于不同的移动电子邮件应用程序和移动设备。对于那些你仍然需要做“黑客”和变通方法的人。
看起来这也适用于 Windows 手机 msdn.microsoft.com/en-us/library/ie/dn265018%28v=vs.85%29.aspx
这些不适用于 iPhone 6 上 iOS 9 的邮件应用程序。
@crmpicco 这很有可能。电子邮件剥离了很多标记。这将明智地包含元标记，因为它们与整个页面相关。您可能需要为此（以及许多其他事情）使用某种 hack 才能在电子邮件中正常工作。
@Anonymous 当这些内置功能最具侵入性时，尤其是在移动设备上，电子邮件是非常令人沮丧的。