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

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

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

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

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

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

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

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

Ответ 1

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

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

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

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

Посмотреть другие Apple Meta Tag Keys.

Примечание: если у вас есть номера телефонов на странице с этими номерами, вы должны вручную отформатировать их как ссылки:
<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 - обернуть телефонные номера в теги link/anchor (<a href=""></a>) и затем настроить таргетинг на их стили, используя css, как <a href=""></a> ниже и настройте конкретные свойства, которые необходимо сбросить:

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.

Ответ 2

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

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

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

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

Ответ 3

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

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.

Ответ 4

Если люди находят этот вопрос в 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;}

Ответ 5

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

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

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

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

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

Ответ 6

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

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

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

CSS

.phone_menu{
  color:orange;
}

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

.phone_menu a{
  color:orange;
}

Ответ 7

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

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

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

Ответ 8

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

Вы должны применить "tel:" в атрибуте href вашей ссылки, например:

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

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

Ответ 9

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

Ответ 10

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

    <a href="tel:5551231234">

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

Ответ 11

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

Ответ 12

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

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

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

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

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

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

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

$('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>');

Ответ 13

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

Ответ 14

Ввод числа в <fieldset> по какой-то причине не позволит iOS преобразовывать номер в ссылку. В некоторых случаях это может быть правильным решением. Я не рекомендую отключить конвертацию ссылок на ссылки.

Ответ 15

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

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

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

Ответ 16

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

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

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

Ответ 17

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

из этого: -

: –

ex: change 555-555-5555 = > 555–555–5555

Ответ 18

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

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

Ответ 19

Этот атрибут 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>

Ответ 20

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

<p>800<font>-</font>555<font>-<font>1212</p>