Есть ли способ удалить синий цвет гиперссылки по умолчанию из номера телефона при просмотре на iPhone? Хотите добавить определенный тег Mobile Safari или CSS?
У меня есть только это место для номера:
<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>
И нет никаких гиперссылок, но iPhone по-прежнему отображает этот текст в виде гиперссылки. У меня проблема с рендерингом на некоторых моих сайтах, но я не понимаю, почему это происходит.
Я прочитал этот пост:
Мобильный HTML-рендеринг номеров
Но возможно ли это единственное решение?
html
ios
css
mobile-safari
Reno
источник
источник
Ответы:
Два варианта ...
1. Установите
format-detection
метатег.Для того, чтобы удалить все автоматическое форматирование номеров телефонов, добавить это к
head
вашемуhtml
документу:Посмотреть другие Apple Meta Tag Keys .
2. Не можете установить метатег? Хотите использовать
css
?Два
css
варианта:Вариант 1 (лучше для веб-страниц)
Целевые ссылки со
href
значениями, начинающимися сtel
использования этого селектора атрибута css:Вариант 2 (лучше для шаблонов электронной почты html)
В качестве альтернативы, вы можете, когда вы не можете установить метатег - например, в html email, - обернуть телефонные номера в теги link / anchor (
<a href=""></a>
), а затем настроить таргетинг на их стили, используя css, как указано ниже, и настроить конкретные свойства, которые необходимо сбросить. :Если вы хотите настроить таргетинг на конкретные ссылки, используйте классы в своих ссылках, а затем обновите селектор css выше до
a[x-apple-data-detectors].class-name
.источник
Просто чтобы развить более раннее предложение Дэвида Томаса:
Добавление этого к вашему css оставляет функциональность телефонного номера, но лишает подчеркивания и соответствует цвету, который вы использовали первоначально.
Странно, что я могу опубликовать свой собственный ответ, но я не могу ответить на чужой ..
источник
Если вы хотите сохранить функцию номера телефона, но просто удалить подчеркивание для отображения, вы можете оформить ссылку как любой другой:
Я не видел документации, в которой предлагалось бы применить класс к ссылкам на телефонные номера, поэтому вам придется добавлять классы / идентификаторы к ссылкам, которые вы хотите иметь другой стиль.
В качестве альтернативы вы можете стилизовать ссылку, используя:
Это понимает iPhone и не будет применяться (насколько я знаю, возможно, Android, Blackberry и т. Д. Пользователи / разработчики могут комментировать) любым другим UA.
источник
a[href^=tel:]
чтобы вы случайно не сопоставили hrefs иtelephone.html
т. Д.В случае, если люди найдут этот вопрос в Google, все, что вам нужно сделать, это рассматривать номер телефона как ссылку, так как Apple автоматически установит его как один.
ваш HTML
ваш css
источник
Так как мы используем tel: ссылки на сайте с значком телефона: до того, как большинство решений, опубликованных здесь, представляет другую проблему.
Я использовал метатег:
<meta name="format-detection" content="telephone=no">
Это в сочетании с указанием тел: ссылки на сайте, где он должен быть связан!
Использование css на самом деле не вариант, так как скрывает соответствующие тел-ссылки.
источник
У меня сработал простой трюк, добавив скрытый объект в середине номера телефона.
Это поможет вам изменить цвет номера телефона для IOS.
источник
Старый вопрос, но так как ни один из вышеперечисленных ответов не был мне полезен, я пишу, как я решил его
У меня есть номер телефона в списке:
CSS:
Но на iPad / iPhone это было черным, так что я просто добавил это к CSS:
источник
источник
По словам Бо Смита на эту тему: Как убрать синие стили телефонных номеров на iPhone / iOS?
Вы должны применить "tel:" в атрибуте href вашей ссылки следующим образом:
Это удалит любой дополнительный стиль и DOM к строке телефонного номера.
источник
Я ходил туда-сюда между
1.
2.
Попытка заставить тот же самый код работать для настольного компьютера и iPhone. Проблема заключалась в том, что если используется первый вариант и вы щелкаете по нему из браузера настольного компьютера, он выдает сообщение об ошибке, а если используется второй, он отключает функцию табуляции для вызова на iPhone iOS5.
Поэтому я попробовал и попробовал, и оказалось, что iPhone рассматривает номер телефона как особый тип ссылки, который можно отформатировать с помощью CSS как единого. Я обернул число в адресный тег (он будет работать с любым другим тегом HTML, просто попробуйте избежать
<a>
тега) и стилизовал его в CSS каки это сработало - в настольном браузере показывался простой текст, а в мобильном Safari - как ссылка с окном вызова / отмены, появляющимся на вкладке без синего цвета и подчеркивания по умолчанию.
Просто будьте осторожны с правилами CSS, применяемыми к числу, особенно при использовании отступов / полей.
источник
Нет необходимости удалять определение формата с помощью
<meta name="format-detection" content="telephone=no">
. Попробуйте использовать номер телефона в любом теге, а не привязывать тег и стилизовать его соответственно, например:span { background:none !important; border:0; padding:0; }
источник
<meta name="format-detection" content="telephone=no">
, Этот метатег работает в браузере Safari по умолчанию на устройствах iOS и будет работать только для телефонных номеров, которые не заключены в телефонную ссылку, поэтомупервая строка не будет отформатирована как ссылка, если вы укажете метатег, но вторая строка будет, потому что она обернута в телефонную привязку.
Вы можете отказаться от метатэга все вместе и использовать миксин, такой как
сохранить предназначенный стиль ваших телефонных номеров, но вы должны убедиться, что вы завернули их в якорь телефона.
Если вы хотите быть особенно осторожными и защищаться от события, когда телефонный номер неправильно отформатирован с помощью тега привязки, вы можете просмотреть DOM и настроить его с помощью этого сценария. Отрегулируйте шаблон замены по желанию.
или даже лучше без jQuery
источник
Если вы не собираетесь указывать номера телефонов на своей странице, то
<meta name="format-detection" content="telephone=no">
будет работать нормально. Но если говорить риторически, что если вы намереваетесь использовать сочетание телефонных и не телефонных номеров?Предполагая, что вы просто жестко кодируете числа в своем HTML-коде, хаки «вставьте цифры в середине ваших цифр» будут работать. Но они практически бесполезны для динамических страниц, таких как использование PHP для вывода числовых данных из запроса.
В качестве примера я составил список населения города. Некоторые группы населения были достаточно большими, чтобы Mobile Safari превратил их в ссылки на телефонные номера. К счастью, все, что мне нужно было сделать, это использовать PHP
number_format()
вокруг вывода массива, чтобы вставить «тысячи» запятых:<?php echo number_format($row["population"]) ?>
Этого форматирования было достаточно, чтобы убедить Mobile Safari в том, что для номера было несколько более конкретное назначение, поэтому он больше не использовал мои большие номера в телефонных линиях. То же самое относится и к предложению @davidcondrey об использовании
<a href="tel:18001234567">1-800-123-4567</a>
для указания цели для числа.Суть в том, что Safari Mobile явно обращает внимание на семантику. Учитывая, что HTML5 построен на семантической разметке, а поисковые системы полагаются на семантическую разметку, я намерен использовать ее как можно чаще.
источник
Помещение числа в <fieldset> по какой-то причине не позволит iOS преобразовать число в ссылку. В некоторых случаях это может быть правильным решением. Я не сторонник полного отключения конвертации в ссылки.
источник
iOS делает номера телефонов кликабельными по умолчанию (по понятным причинам). Конечно, это добавляет дополнительный тег, который переопределяет ваш стиль, если ваш номер телефона уже не является ссылкой.
Чтобы исправить это, попробуйте добавить это в вашу таблицу стилей:
a[href^=tel] { color: inherit; text-decoration: none; }
Это должно сохранить ваши телефонные номера в стиле, как вы ожидаете, без добавления дополнительной разметки.
источник
Попробуйте использовать символ ASCII для тире между разделением цифр.
из этого: -
к этому:
–
пример: изменить
555-555-5555
=>555–555–5555
источник
Это сделало это для меня:
Вы можете найти больше информации здесь .
источник
У меня в Joomla Yootheme работает:
источник
Этот атрибут x-ms-format-detection = "none" обрабатывает формат телефона.
https://msdn.microsoft.com/en-us/library/dn337007(v=vs.85).aspx
источник
Если вы просто хотите, чтобы номера телефонов не были ссылками, попробуйте использовать тег шрифта:
источник