Mobile Safari/ iPhone Mail.app HTML design issues:

问题:

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.

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)

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

回答1:

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....

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

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

回答2:

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:

<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.

回答3:

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.

回答4:

<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.

回答5:

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 href attribute and with a style attribute defining the color that we wanted it to be:

<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.

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.

回答6:

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.

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.

回答7:

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.

回答8:

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.

This works for any kind of auto links.

回答9:

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

<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">

for phone numbers ONLY and 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.