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

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

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">

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

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

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

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

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

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

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

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

CSS:

.phone_menu{
  color:orange;
}

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

.phone_menu a{
  color:orange;
}

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

По словам Бо Смита на эту тему: Как убрать синие стили телефонных номеров на 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 - как ссылка с окном вызова / отмены, появляющимся на вкладке без синего цвета и подчеркивания по умолчанию.

Просто будьте осторожны с правилами 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 и будет работать только для телефонных номеров, которые не заключены в телефонную ссылку, поэтому

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

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

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

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

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

из этого: -

к этому: –

пример: изменить 555-555-5555=>555–555–5555

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

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

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

У меня в Joomla Yootheme работает:

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

Этот атрибут x-ms-format-detection = "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>