移动Safari/iPhone Mail.app HTML设计问题:防止自动链接和样式自动链接(日期,地址等)

Question

我正在尝试设计一个HTML电子邮件,当它在移动设备上阅读时也应该看起来很好.我最大的问题是iPhone(iOS 4):它大多没有文档的"自动链接"功能真的让我感到困惑.

自动链接似乎出现了

• 电话号码(这是唯一记录的功能,如此处所述)
• 地址
• 日期

有没有关于如何的文件

1. 禁用日期和地址的自动链接
2. 通过微格式或类似的方式"纠正"自动链接(因此结果比iOS 4实际更好)

任何信息,提示或线索都非常感激,因为似乎没有任何信息.

Answer 1

这个问题在这篇帖子中回答了很久以来如何禁用Mobile Safari中的电话号码链接？但重申像我这样的所有其他SEO访客....

...根据适用于iPhone的Safari Web内容指南:

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

Answer 2

我实际上想出了一个诀窍来做到这一点.这太可怕了,但确实有效.您可以在http://commondream.net/post/8933806735/avoiding-data-detectors-in-ioss-mail-app上阅读我的帖子,但一般要点是数据检测器不会链接已经存在的内容HTML电子邮件中的链接,因此您可以转到:

<span>Tuesday</span>

成:

<a href="#tuesday" id="tuesday" 
    style="color: #000; text-decoration: none;">Tuesday</a>

这是一个可怕的代码,但它使数据检测器不会发生只有几个缺点,即丑陋的标记和邮件客户端滚动到该特定项目,如果你点击它.

所有这些都说,我认为你应该禁用数据检测器是非常有限的.我有一封电子邮件,按星期几列出了天气预报,并且觉得没有用户想要在他们的日历中记下这些信息,但我会说你不应该禁用数据检测器,如果你认为它们实际上可以很有用.

Answer 3

对于日期和地址,您可以通过插入例如零宽度实体来中断数据识别模式匹配.例如,

M​arch 30, 2013

在iOS Mail 4.3和6.0上测试过.

Answer 4

<a href="#" style="color: #666666; text-decoration: none;pointer-events: none;">Boca Raton, FL 33487</a>

将颜色更改为与文本匹配的颜色,文本修饰删除下划线,指针事件使其无法像浏览器中的链接一样被查看

这非常适合ios和浏览器上的HTML电子邮件.

Answer 5

我们也遇到了这个问题.为了在iOS上禁用Safari中地址的格式检测,我们将地址包装在<a>没有href属性的标签中,并使用style定义我们希望的颜色的属性:

<a style="color: #c0c0c0;">Square, Inc., 901 Mission Street, San Francisco, CA 94103</a>

结果仍可在iOS Safari中单击,但会以我们想要的颜色呈现.

在其他浏览器中,链接不可点击,并且因为内联样式颜色与现有文本相同,所以它与周围文本看起来没有任何不同.

Answer 6

我认为您不能像处理电话号码那样禁用地址和日期的自动链接，至少在 Apple 的官方文档Safari HTML Reference中没有。

尝试阻止自动链接的一种方法是在内容中使用一些冗余标签。例如，<div>+61 3 777 8888</div>您可以执行类似 的操作，而不是写出<div><foo>+61 3 777</foo> 8888</div>。它不是很优雅，但它可能会实现你想要的。