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

198

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

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

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

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

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

Мобильный HTML-рендеринг номеров

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

Reno
источник
Не совсем уверен, что это одно и то же, вы можете проверить, пожалуйста? stackoverflow.com/questions/3712475/…
Пекка
3
@Pekka: я думаю, что этот вопрос похож, но отличается. Это было о предотвращении того, чтобы что-то было неправильно интерпретировано как номер телефона. Это похоже на то, что реальные телефонные номера не могут испортить ваш дизайн.
Чак
Возможный дубликат Как отключить привязку номера телефона в Mobile Safari?
Брайан Роджерс

Ответы:

419

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

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.

Бо Смит
источник
Привет Боссмит, спасибо за ваш ответ. Закончил свое первое решение в конце концов некоторое время назад ... просто подумал, есть ли другое решение проблемы.
Рено
1
@Beau Smith, это тоже сработало для меня, но не на iPod Safari 1-го поколения. Есть ли какой-то определенный тег для этого старого браузера?
Ладо Ломидзе
12
45 ответов и до сих пор не сделали это решение? :)
kaleazy
Это ответ. Если бы у вас была контактная страница, номера которой не отображались бы на iPad и iPhone. Это сработало, спасибо!
tahdhaze09
1
RE, используя 'tel:' ссылки на разметку телефонных номеров: также было предложено использовать микроформаты в качестве альтернативы ( ux.stackexchange.com/a/21121/36009 ).
Дэвид Кук
163

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

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

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

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

Silverback
источник
1
Это лучшее решение, НО оно должно быть таким, как я считаю: a [href ^ = "tel"] {color: наследовать; текст-отделка: нет; } По крайней мере, это то, что сработало для меня. Вам нужны двойные кавычки (""), как указано здесь: stackoverflow.com/questions/3859101/what-does-ahref-do-in-css
Panagiotis Palladinos
Я добавил цитаты. Хотя это может работать без использования кавычек, спецификации CSS требуют их для строк. Спасибо Panagiotis.
Серебристый
Спасибо! Это сводит меня с ума. Лучший ответ для сохранения функциональности тоже (и, вероятно, должен быть признанным ответом!)
Rexxo
28

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

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.

Дэвид говорит восстановить Монику
источник
6
Вероятно, это хорошая идея, a[href^=tel:]чтобы вы случайно не сопоставили hrefs и telephone.htmlт. Д.
Mattias Wadman
1
@MattiasWadman Ваше предложение не сработало для меня в Chrome или мобильном Safari.
cfx
13

В случае, если люди найдут этот вопрос в 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;}
Самми
источник
Это то, что я искал, все главные комментарии не упоминают об этом явно.
n8win
10

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

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

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

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

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

Valross.nu
источник
1
Спасибо тебе за это! Отлично работает на Cordova / Ionic.
TechnoTim
6

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

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

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

Аркадас Килич
источник
Это работает, но нарушает функциональность ссылок. Для нуждающихся вещей в крайнем случае (как сегодня) это хорошо.
Каролус
1
Ваш пример не работает для меня, но столяр нулевой ширины & zwj; сделал свое дело.
Der_Meister
5

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

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

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

CSS:

.phone_menu{
  color:orange;
}

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

.phone_menu a{
  color:orange;
}
Marko
источник
4
a[href^=tel]{
    color:inherit;
    text-decoration: inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;
Росс
источник
2

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

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

Bryana
источник
2

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

Neetu
источник
1

<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>');
davidcondrey
источник
1

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

KiloVoltaire
источник
1

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

Оливер П
источник
1

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

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

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

Subindas вечера
источник
0

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

из этого: -

к этому: &ndash;

пример: изменить 555-555-5555=>555&ndash;555&ndash;5555

Джастин Дж. Б. Брайант
источник
0

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

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

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

Клаудио Паскариелло
источник
0

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

a:not([class]) {
    color: #fff !important;
}
Максимум
источник
-2

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

<p>800<font>-</font>555<font>-<font>1212</p>
Дэвид Лоу
источник