Проблемы с дизайном Mobile Safari/iPhone Mail.app: предотвращение автозапуска и стилизации авто-ссылок (даты, адреса и т.д.).
Я пытаюсь создать HTML-письмо, которое также должно выглядеть хорошо, когда оно читается на мобильных устройствах. Мои самые большие проблемы связаны с iPhone (iOS 4): в большинстве случаев недокументированная функция "автосвязывания" меня очень беспокоит.
Кажется, что Autolinking появляется на
- номера телефонов (это единственная зарегистрированная функция, так как объясняется здесь)
- адрес
- даты
Есть ли какая-либо документация о том, как
- отключить автоматическую привязку для дат и адресов
- "исправить" автозапуск через микроформаты или что-то подобное (поэтому результаты лучше, чем на самом деле с iOS 4)
Любая информация, подсказки или подсказки действительно оценены, потому что там, кажется, нет какой-либо информации.
Ответы
Ответ 1
На этот вопрос был дан ответ в этой теме Как отключить ссылку на номер телефона в Mobile Safari?, но повторить для всех других посетителей SEO, таких как я....
... согласно Safari Web Content Guide для iPhone:
<meta name="format-detection" content="telephone=no">
Ответ 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>
Это ужасный код, но он не позволяет детекторам данных встречаться только с несколькими недостатками, а именно с уродливой разметкой и почтовым клиентом, прокручивающим этот конкретный элемент, если вы нажмете на него.
Все сказанное, я думаю, что это довольно ограничено, когда вы должны отключить детекторы данных. У меня было электронное письмо, в котором перечислены прогнозы погоды по дням недели, и я чувствовал, что ни один пользователь не захочет отмечать эту информацию в своем календаре, но я бы сказал, что вы не должны отключать детекторы данных, если вы когда-нибудь подумаете, что они могут на самом деле быть полезным.
Ответ 3
Для дат и адресов вы можете нарушить сопоставление шаблонов распознавания данных, вставив, например, объект с нулевой шириной. Например,
M​arch 30, 2013
Протестировано в iOS Mail 4.3 и 6.0.
Ответ 4
<a href="#" style="color: #666666; text-decoration: none;pointer-events: none;">Boca Raton, FL 33487</a>
Измените цвет на то, что соответствует вашему тексту, украшение текста удаляет подчеркивание, события указателя останавливают его от просмотра как ссылку в браузере
Это идеально подходит для электронных писем HTML на ios и в браузере.
Ответ 5
Мы столкнулись с этой проблемой. Чтобы отключить обнаружение формата адресов в Safari в iOS, мы завернули наш адрес в тег <a>
без атрибута href
и с атрибутом style
, определяющим цвет, который мы хотели бы это сделать:
<a style="color: #c0c0c0;">Square, Inc., 901 Mission Street, San Francisco, CA 94103</a>
Результат по-прежнему доступен для кликов в iOS Safari, но отображается в желаемом цвете.
В других браузерах ссылка не доступна для кликов, и поскольку цвет встроенного стиля был таким же, как и существующий текст, он не выглядел иначе, чем окружающий текст.
Ответ 6
Я не думаю, что вы можете отключить автоматическую привязку для адресов и дат, например, по номерам телефонов, по крайней мере, это не в официальной документации Apple, Ссылка HTML Safari.
Взлом, чтобы попытаться предотвратить автоматическую привязку, заключается в использовании некоторых избыточных тегов в контенте. Например, вместо записи <div>+61 3 777 8888</div>
вы можете сделать что-то вроде <div><foo>+61 3 777</foo> 8888</div>
. Он не очень элегантный, но он может достичь того, чего вы хотите.
Ответ 7
Если вам это удастся, включение в одинарные кавычки приведет к отключению автоматической привязки. Это также работает для темы, где вы не можете использовать трюки HTML.
Ответ 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 и работает через борт.
Это работает для любых типов ссылок.
Ответ 9
Создание тега ссылки <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>
) для номеров телефонов, которые вы не хотите связывать.