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

时间:2011-03-10 20:19:56

标签: html ios email mobile-safari

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

自动链接似乎出现在

  • 电话号码(这是唯一记录的功能,如explained here
  • 地址
  • 日期

那里有关于如何

的文件
  1. 禁用日期和地址的自动链接
  2. 通过微格式或类似的方式“纠正”自动链接(因此结果比iOS 4实际更好)
  3. 任何信息,提示或线索都非常感激,因为似乎没有任何信息。

9 个答案:

答案 0 :(得分:14)

这个问题在这篇帖子How to disable phone number linking in Mobile Safari?中回答了很长一段时间,但重申所有其他像我这样的SEO访客......

  

...根据Safari Web Content Guide for iPhone

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

答案 1 :(得分:9)

我实际上想出了一个诀窍。这太可怕了,但确实有效。您可以在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>

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

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

答案 2 :(得分:9)

日期和时间地址,您可以通过插入例如地址来破坏数据识别模式匹配零宽度实体。例如,

M&#x200b;arch 30, 2013

在iOS Mail 4.3和6.0上测试。

答案 3 :(得分:7)

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

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

这非常适合在ios和浏览器上发送HTML电子邮件。

答案 4 :(得分:6)

我们也遇到了这个问题。为了禁用iOS上Safari中地址的格式检测,我们将地址包含在<a>标记中,其中没有href属性,并且style属性定义了我们想要的颜色是:

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

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

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

答案 5 :(得分:3)

我认为您不能像使用电话号码一样禁用地址和日期的自动链接,至少它不在Apple的官方文档Safari HTML Reference中。

尝试阻止自动链接的黑客攻击是在内容中使用一些冗余标记。例如,您可以执行<div>+61 3 777 8888</div>之类的操作,而不是写出<div><foo>+61 3 777</foo> 8888</div>。它不是很优雅,但可能达到你想要的效果。

答案 6 :(得分:2)

如果你可以逃脱它,用单引号括起来将禁用自动链接。这也适用于主题行,您无法使用HTML技巧。

答案 7 :(得分:2)

我将此解决方案用于需要设置样式的自动链接

<span class="applelinksWhite">or call 1-666-12<span>3-456</span>7</span>

然后,我将其添加到我的样式标签中。我在身体中使用它,因为一些客户将它从头部剥离。

.applelinksWhite a {color:#ffffff !important; text-decoration:none;}

所以applelinks跨度涵盖了ios设备的自动链接,我在文本字符串的中间抛出一个基本范围,以抛弃其他客户端,如gmail。在Litmus进行测试并全面开展工作。

适用于任何类型的自动链接。

答案 8 :(得分:2)

创建无法执行任何操作的<a>链接标记似乎是至少日期和地址的最佳选择:

<a href="javascript: void(0)" style="cursor:text; text-decoration:none; color:#333333;">July 18, 2014</a>

您可以使用

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

电话号码,它将禁用所有人的电话号码;这可能不是你想要做的。

如果您不使用此元标记,则可以使用CSS设置样式以根据需要更改链接颜色。并使用上面的代码(<a>标签)来表示您不想链接的电话号码。