Как убрать синий стиль телефонных номеров на iPhone / iOS? - PullRequest
Новая
       0

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

186 голосов
/ 17 сентября 2010

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

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

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

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

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

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

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

Ответы [ 20 ]

395 голосов
/ 30 октября 2010

Два варианта ...

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?

Два css варианта:

Вариант 1 (лучше для веб-страниц)

Целевые ссылки со значениями href, начинающимися с tel, с помощью этого селектора атрибута css: 

a[href^="tel"] {
  color: inherit; /* Inherit text color of parent element. */
  text-decoration: none; /* Remove underline. */
  /* Additional css `propery: value;` pairs here */
}

Вариант 2 (лучше для шаблонов электронной почты html)

В качестве альтернативы, вы можете, когда вы не можете установить метатег - например, в html email - обернуть телефонные номера в теги ссылки / привязки (<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.

159 голосов
/ 19 июня 2012

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

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

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

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

28 голосов
/ 17 сентября 2010

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

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

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

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

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

, которая понимается iPhone, и не будет применяться (насколько я знаю, возможно, пользователи Android / Devberry, и т.д. могут комментировать) любойдругой UA.

12 голосов
/ 05 февраля 2013

В случае, если люди найдут этот вопрос в 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;}
9 голосов
/ 07 июля 2014

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

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

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

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

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

5 голосов
/ 08 мая 2014

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

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

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

css: 

.phone_menu{
  color:orange;
}

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

.phone_menu a{
  color:orange;
}
5 голосов
/ 06 октября 2014

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

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

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

4 голосов
/ 26 июня 2013 
a[href^=tel]{
    color:inherit;
    text-decoration: inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
3 голосов
/ 09 апреля 2012

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

В атрибуте href следует использовать «tel:»Ваша ссылка, как это: 

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

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

2 голосов
/ 19 апреля 2012

Я ходил туда-сюда между

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 - как ссылка с окном вызова / отмены, появляющимся на вкладке без синего цвета и подчеркивания по умолчанию.

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

Страница:
...