Как удалить синий стиль телефонных номеров на iPhone / iOS?

Есть ли способ удалить синий цвет гиперссылки по умолчанию с номера телефона при просмотре на iPhone? Как определенный тег Mobile Safari или CSS для добавления?

У меня есть только это место для числа:

<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p> 

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

Я прочитал этот пост:

Мобильные номера рендеринга HTML

Но возможно ли, что единственное решение?

Два варианта …

1. Установите метатег для format-detection .

Чтобы удалить все автоматическое форматирование для телефонных номеров, добавьте это в head своего html документа:

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

Дополнительные мета-теги для Apple .

Примечание. Если у вас есть номера телефонов на странице с этими номерами, вы должны вручную отформатировать их как ссылки:

 <a href="tel:+1-555-555-5555">1-555-555-5555</a> 

2. Невозможно установить метатег? Хотите использовать CSS ?

Если вы не можете установить метатег, например, в html- <a href=""></a> электронной почты в тегах ссылок / <a href=""></a> ( <a href=""></a> ), а затем настроить их стили с помощью css, аналогичного следующему, и настроить конкретные свойства, необходимые для сброса:

 a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } 

Если вы хотите настроить таргетинг на определенные ссылки, используйте классы в своих ссылках, а затем обновите селектор css выше до a[x-apple-data-detectors].class-name .

Кроме того, вы можете настроить целевые ссылки на значения href начиная с tel , используя этот селектор css:

 a[href^="tel"] { /* css propery: value pairs here */ } 

Просто чтобы уточнить предыдущее предложение Дэвида Томаса:

 a[href^="tel"]{ color:inherit; text-decoration:none; } 

Добавление этого в ваш css оставляет функциональность номера телефона, но разделяет подчеркивание и соответствует цвету, который вы использовали первоначально.

Странно, что я могу опубликовать свой собственный ответ, но я не могу ответить кому-то другому.

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

 a:link {text-decoration: none; /* or: underline | line-through | overline | blink (don't use blink. Ever. Please.) */ } 

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

В качестве альтернативы вы можете создать ссылку, используя:

 a[href^=tel] { /* css */ } 

Это понимается iPhone и не будет применяться (насколько я знаю, возможно, Android, Blackberry и т. Д. Пользователи / разработчики могут комментировать) любым другим UA.

Если люди находят этот вопрос в Google, все, что вам нужно сделать, это обработать номер телефона в качестве ссылки, поскольку Apple автоматически установит его как один.

ваш HTML-код

 <p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p> 

ваш css

 #phone-text a{color:#fff; text-decoration:none;} 

Поскольку мы используем tel: ссылки на сайте с иконкой телефона: до того, как большинство решений, размещенных здесь, представляет другую проблему.

Я использовал метатег:

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

Это в сочетании с указанием tel: ссылки на сайте, где он должен быть связан!

Использование css действительно не является вариантом, поскольку он скрывает соответствующие tel-ссылки.

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

У меня есть номер телефона в списке:

 <li class="phone_menu">+555 5 555 55 55</li> 

CSS:

 .phone_menu{ color:orange; } 

Но на iPad / iPhone он был черным, поэтому я просто добавил это в css:

 .phone_menu a{ color:orange; } 

Простой трюк работал для меня, добавляя скрытый объект в середине номера телефона.

 <span style="color: #fff;"> 0800<i style="display:none;">-</i> 9996369</span> 

Это поможет вам переопределить цвет номера телефона для IOS.

По словам Бо Смита из этой темы: Как удалить синий стиль телефонных номеров на iPhone / iOS?

Вы должны применить «tel:» в атрибуте href вашей ссылки следующим образом:

 <a href="tel:5551231234">555 123-1234</a> 

Он удалит любой дополнительный стиль и DOM в строку номера телефона.

Я шел туда и обратно между

1.

  <a href="tel:5551231234"> 

2.

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

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

Поэтому я попытался и попытался, и оказалось, что iPhone обрабатывает номер телефона как особый тип ссылки, который можно отформатировать с помощью CSS как одного. Я завернул номер в теге адреса (он будет работать с любым другим тегом HTML, просто попробуйте избежать тега <a> ) и ввел его в CSS как

 .myDiv address a {color:#FFF; font-style: normal; text-decoration:none;} 

и он работал – в настольном браузере был показан простой текст, а в мобильном телефоне Safari показано как ссылка с окном Call / Cancel, появляющимся на вкладке и без голубого цвета по умолчанию и подчеркивания.

Просто будьте осторожны с правилами css, применяемыми к числу, особенно при использовании padding / margin.

a[href^=tel]{ color:inherit; text-decoration: inherit; font-size:inherit; font-style:inherit; font-weight:inherit;

Нет необходимости удалять обнаружение формата с помощью <meta name="format-detection" content="telephone=no"> . Попробуйте использовать номер телефона в любом теге, а не в теге привязки, и, соответственно, его стиль: span { background:none !important; border:0; padding:0; } span { background:none !important; border:0; padding:0; }

<meta name="format-detection" content="telephone=no"> . Этот метатаг работает в браузере Safari по умолчанию на устройствах iOS и работает только для телефонных номеров, которые не завернуты в телефонную связь, поэтому

 1-800-123-4567 <a href="tel:18001234567">1-800-123-4567</a> 

первая строка не будет отформатирована как ссылка, если вы укажете метатаг, но вторая строка будет потому, что она завернута в телефонную привязку.


Вы можете отказаться от метатага вместе и использовать миксин, такой как

 a[href^=tel]{ color:inherit; text-decoration:inherit; font-size:inherit; font-style:inherit; font-weight:inherit; } 

для поддержания желаемого стиля ваших телефонных номеров, но вы должны убедиться, что вы завернули их в телефонную связь.

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

 $('body').html($('body').html().replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g, '<a href="tel:+1$1$2$3">($1) $2-$3</a>')); 

или даже лучше без jQuery

 document.body.innerHTML = document.body.innerHTML.replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g,'<a href="tel:+1$1$2$3">($1) $2-$3</a>'); 

Если вы не намереваетесь иметь какие-либо номера телефонов на своей странице, то <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 преобразовать номер в ссылку по какой-либо причине. В некоторых случаях это может быть правильным решением. Я не защищаю от отключения конвертации ссылок.

Попробуйте использовать знак ASCII для тире между разделителями цифр.

из этого: –

к этому: &ndash;

ex: change 555-555-5555 => 555&ndash;555&ndash;5555

Это сделало это для меня:

 .appleLinks a {color:#000000;} .appleLinksWhite a {color:#ffffff;} 

Вы можете найти больше информации здесь .

В Joomla Yootheme работает для меня:

 a:not([class]) { color: #fff !important; } 

iOS делает номера телефонов доступными по умолчанию (по понятным причинам). Конечно, это добавляет дополнительный тег, который переопределяет ваш стиль, если ваш номер телефона еще не является ссылкой.

Чтобы исправить это, попробуйте добавить это в таблицу стилей: a[href^=tel] { color: inherit; text-decoration: none; } a[href^=tel] { color: inherit; text-decoration: none; }

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

Этот атрибут x-ms-format-detect = "none" обрабатывает формат телефона.

https://msdn.microsoft.com/en-us/library/dn337007(v=vs.85).aspx

 <p id="phone-text" x-ms-format-detection="none" >Call us on <strong>+44 (0)20 7194 8000</strong></p> 

Если вы просто хотите, чтобы телефонные номера не были ссылками, попробуйте использовать тег шрифта:

 <p>800<font>-</font>555<font>-<font>1212</p> 
Interesting Posts
Давайте будем гением компьютера.