Проблемы с дизайном HTML в Mobile Safari / iPhone Mail.app: запретить автоматическое связывание и стилизацию авто-ссылок (даты, адреса и т. Д.)

Question

Я пытаюсь создать электронную почту в формате HTML, которая также должна хорошо выглядеть при чтении на мобильных устройствах. Мои самые большие проблемы с iPhone (iOS 4): его в основном недокументированная функция «автоматического связывания» действительно меня беспокоит.

Кажется, что автоподключение появляется на

• номера телефонов (это единственная документированная функция, как объяснено здесь )
• 1010 * адрес *
• дата

Есть ли документация о том, как

1. отключить автоматическое связывание для дат и адресов
2. «исправить» автосвязь через микроформаты или что-то подобное (чтобы результаты были лучше, чем на самом деле с iOS 4)

Любая информация, подсказки или подсказки действительно приветствуются, потому что, похоже, никакой информации вообще не существует.

Answer 1

На этот вопрос давно ответили в этой теме Как отключить привязку номера телефона в Mobile Safari? , но повторить для всех других посетителей SEO, таких как я ....

... в соответствии с Safari Web Руководство по содержанию для iPhone :

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

Answer 2

Для дат и адресов вы можете нарушить сопоставление шаблона распознавания данных, вставив, например, объект нулевой ширины. Например,

M​arch 30, 2013

Протестировано на iOS Mail 4.3 и 6.0.

Answer 3

Я на самом деле понял хитрость, чтобы сделать это.Это довольно ужасно, но это работает.Вы можете прочитать мой пост об этом на 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>

Это ужасный код, но он не дает детекторам данных случиться только с несколькими недостатками, а именно с уродливой разметкой и прокруткой почтового клиента до этого конкретного элемента, если вы щелкнете по нему.

Все это говорит, я думаю, что это довольно ограничено, когда вы должны отключить детекторы данных.У меня было электронное письмо, в котором были представлены прогнозы погоды по дням недели, и я чувствовал, что ни один пользователь не захочет пометить эту информацию в своем календаре, но я бы сказал, что вам не следует отключать детекторы данных, если вы думаете, что они действительно могутбыть полезным.

Answer 4

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

Измените цвет на любой, соответствующий вашему тексту, текстовое оформление удаляет подчеркивание, события указателя мешают его просматривать как ссылку в браузере

Это идеально подходит для электронных писем в формате HTML в ios и браузере,

Answer 5

Мы тоже столкнулись с этой проблемой. Чтобы отключить определение формата адресов в Safari на iOS, мы завернули наш адрес в тег <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>.Это не очень элегантно, но может достичь того, что вы хотите.

Answer 7

Создание <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>) для телефонных номеров, которые вы не хотите связывать.

Answer 8

Я использую это решение для автоматических ссылок, которые нужно стилизовать

<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 и работает по всем направлениям.

Это работает для любого вида автоматических ссылок.

Answer 9

Если вы можете избежать неприятностей, заключение в одинарные кавычки отключит автоматическое связывание. Это также работает для строки темы, где вы не можете использовать трюки HTML.