Mobile Safari/ iPhone Mail.app HTML 设计问题：防止自动链接和样式自动链接（日期、地址等）

Mobile Safari/ iPhone Mail.app HTML design issues: prevent autolinking and styling auto-links (dates, addresses, etc.)

提问by z3cko

i am trying to design an HTML e-mail that should also look good when it is read on mobile devices. My biggest problems are with the iPhone (iOS 4): its mostly undocumented "auto linking" feature really bugs me.

我正在尝试设计一个 HTML 电子邮件，当它在移动设备上阅读时也应该看起来不错。我最大的问题是 iPhone (iOS 4)：它几乎没有记录的“自动链接”功能真的让我很烦恼。

Autolinking seems to appear on

自动链接似乎出现在

• phone numbers (this is the only documented feature, as explained here)
• addresses
• dates

• 电话号码（这是唯一记录在案的功能，如此处所述）
• 地址
• 日期

Is there any documentation out there on how to

有没有关于如何操作的文档

1. disable auto linking for dates and addresses
2. "correct" the autolinking via microformats or something similar (so the results are better than they actually are with iOS 4)

1. 禁用日期和地址的自动链接
2. 通过微格式或类似的东西“纠正”自动链接（因此结果比 iOS 4 实际更好）

Any information, hints, or clues are really appreciated because there does not seem to be any information out there whatsoever.

任何信息、提示或线索都非常感谢，因为那里似乎没有任何信息。

回答by Terri Ann

This question was answered a long while back in this thread How to disable phone number linking in Mobile Safari?but to reiterate for all other SEO visitors like myself....

这个问题在这个线程中回答了很长时间如何禁用 Mobile Safari 中的电话号码链接？但要重申像我这样的所有其他 SEO 访问者......

...according to the Safari Web Content Guide for iPhone:

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

...根据iPhone的Safari Web 内容指南：

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

回答by commondream

I actually figured out a trick to do this. It's pretty horrible, but it works. You can read my post about it at http://commondream.net/post/8933806735/avoiding-data-detectors-in-ioss-mail-app, but the general gist is that data detectors won't link content that is already a link in HTML emails, so you can turn something like:

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

<span>Tuesday</span>

into:

进入：

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

It's horrible code, but it keeps the data detectors from happening with only a couple of drawbacks, namely ugly markup and the mail client scrolling to that particular item if you click on it.

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

All of that said, I think it's pretty limited when you should disable data detectors. I had an email that listed weather forecasts by day of week, and felt like no user would ever want to mark that information down in their calendar, but I'd say you shouldn't disable data detectors if you ever think that they could actually be useful.

综上所述，我认为禁用数据检测器的时间非常有限。我有一封电子邮件，列出了一周中的每一天的天气预报，并且感觉没有用户愿意在他们的日历中标记该信息，但我想说如果您认为数据检测器实际上可以的话，您不应该禁用它们有用。

回答by tribalvibes

For dates & addresses, you could disrupt the data recognition pattern matching by inserting e.g. a zero width entity. E.g.,

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

M​arch 30, 2013

Tested on iOS Mail 4.3 and 6.0.

在 iOS 邮件 4.3 和 6.0 上测试。

回答by Vincent Tobiaz

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

Change the color to whatever matches your text, text decoration removes the underline, pointer events stops it from being viewed like a link in a browser

将颜色更改为与您的文本匹配的任何颜色，文本装饰删除下划线，指针事件阻止它像浏览器中的链接一样被查看

This is perfect for HTML emails on ios and browser.

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

回答by Beau Smith

We ran into this issue as well. In order to disable the format detection of addresses in Safari on iOS, we wrapped our address in an <a>tag without a hrefattribute and with a styleattribute defining the color that we wanted it to be:

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

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

The result is still clickable in iOS Safari, but is rendered in the color that we desired.

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

In other browsers the link is not clickable and because the inline style color was the same as the existing text, it didn't look any different that the surrounding text.

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

回答by William Niu

I don't think you can disable auto linking for addresses and dates like you do with phone numbers, at least it is not in the Apple's official documentation, the Safari HTML Reference.

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

A hack to try to prevent auto linking is to use some redundant tags in the content. For example, instead of writing out <div>[phone]</div>, you could do something like <div><foo>+61 3 777</foo> 8888</div>. It's not very elegant, but it might achieve what you want.

试图阻止自动链接的一个技巧是在内容中使用一些冗余标签。例如，<div>[phone]</div>您可以执行类似<div><foo>+61 3 777</foo> 8888</div>. 它不是很优雅，但它可能会实现你想要的。

回答by brainjam

If you can get away with it, enclosing in single quotes will disable auto-linking. This also works for the subject line, where you can't use HTML tricks.

如果你能摆脱它，用单引号括起来将禁用自动链接。这也适用于不能使用 HTML 技巧的主题行。

回答by zazzyzeph

I use this solution for auto links that need to be styled

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

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

Then, I add this to my style tag. I use it in the body as some clients strip it from the head.

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

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

So the applelinks span covers ios devices' auto linking, and I throw in a basic span in the middle of the text string to throw off other clients like gmail. Tested in Litmus and working across the board.

因此，applelinks 跨度涵盖了 ios 设备的自动链接，我在文本字符串中间加入了一个基本跨度以摆脱其他客户端，例如 gmail。在 Litmus 中测试并全面工作。

This works for any kind of auto links.

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

回答by CodeOverRide

Creating <a>link tag that doesn't do anything seems to be the best option for date and address at least:

创建<a>不做任何事情的链接标签似乎至少是日期和地址的最佳选择：

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

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

You can use

您可以使用

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

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

for phone numbers ONLYand it will disable phone links for all; This may not what you want to do.

仅适用于电话号码，它将禁用所有人的电话链接；这可能不是您想要做的。

If you don't use this meta tag, you can style with CSS to change the link color as desired. and use above code (<a>tag) for phone numbers that you don't want to link.

如果您不使用此元标记，则可以使用 CSS 设置样式以根据需要更改链接颜色。并将上面的代码（<a>标签）用于您不想链接的电话号码。