Как отключить привязку номера телефона в мобильном Safari?

Safari на iPhone автоматически создает ссылки для строк цифр, которые появляются на телефонные номера. Я пишу веб-страницу, содержащую IP-адрес, и Safari превращает ее в ссылку на номер телефона. Можно ли отключить это поведение для всей страницы или элемента на странице?

24 ответов


это кажется правильным, согласно Safari HTML Reference:

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

Если вы отключите это, но все еще хотите телефонные ссылки, вы все равно можете использовать схему URI "tel".

здесь соответствующую страницу в библиотеке разработчиков Apple.


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

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

чтобы отключить внешний вид разбора телефона для определенных элементов, этот CSS, похоже, делает трюк:

.element { pointer-events: none; }
.element > a { text-decoration:none; color:inherit; }

первое правило отключает щелчок, второе заботится о стиле.


добавьте это, я думаю, это то, что вы ищете:

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

Я использую столяр нулевой ширины &zwj;

просто поместите это где-нибудь в номер телефона, и это сработает для меня. Протестировано в BrowserStack (и лакмусовая бумажка для писем).


решение для Webview!

для приложений PhoneGap-iPhone / PhoneGap-iOS вы можете отключить обнаружение номера телефона, добавив следующее В делегат приложения вашего проекта:

// ...

- (void)webViewDidStartLoad:(UIWebView *)theWebView 
{
    // disable telephone detection, basically <meta name="format-detection" content="telephone=no" />
    theWebView.dataDetectorTypes = UIDataDetectorTypeAll ^ UIDataDetectorTypePhoneNumber;

    return [ super webViewDidStartLoad:theWebView ];
}

// ...

источник: отключить обнаружение телефона в PhoneGap-iOS.


думаю, я нашел решение: поместите число внутри <label> элемент. Не пробовал никаких других тегов, но <div> оставил его активным на главном экране, даже с .

из более ранних комментариев кажется очевидным, что мета-тег действительно работал, но по какой-то причине сломался под более поздними версиями iOS, по крайней мере, при некоторых условиях. Я бегу 4.0.1.


чтобы отключить обнаружение номера телефона на части страницы, оберните затронутый текст в тег привязки с помощью href="#". Если вы это сделаете, mobile Safari и UIWebView должны оставить его в покое.

<a href="#"> 1234567 </a>

у меня была та же проблема, но в веб-приложении iPad.

к сожалению, ни то, ни другое...

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

nor ...

&#48; = 0
&#57; = 9

... работал.

но вот три уродливые хаки:

  • замена числа " 0 "на букву"O"
  • заменить число " 1 "на букву"l"
  • вставить бессмысленный промежуток: например, 555.5<span>5</span>5.5555

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

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

но, достаточно, в крайнем случае.


У меня был ABN (австралийский бизнес-номер), который iPad Safari настаивал на превращении в номер телефона. Ни одно из предложений не помогло. Мое решение состояло в том, чтобы поместить теги img между номерами.

ABN 98<img class="PreventSafariFromTurningIntoLink" /> 009<img /> 675<img /> 709

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

работает на iPad 1 (4.3.1) и iPad 2 (4.3.3).


мой опыт такой же, как и некоторые другие упомянутые. Мета-тег...

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

...работает, когда веб-сайт работает в мобильном Safari (т. е. с chrome), но перестает работать при запуске как webapp (т. е. сохраняется на главном экране и работает без chrome).

мое менее чем идеальное решение-вставить значения в поля ввода...

<input type="text" readonly="readonly" style="border:none;" value="3105551212">

Это меньше, чем идеально, потому что, несмотря на то, что граница установлена в none, iOS отображает многопиксельную серую полосу над полем. Но это лучше, чем видеть номер в качестве ссылки.


вы также можете использовать <a> ярлык с javascript: void(0) as href значение.

пример как следовать:
<a href="javascript: void(0)">+44 456 77 89 87</a>


Я испытал это сам и обнаружил, что он работает, хотя это, конечно, не элегантное решение. Вставка пустого промежутка в номер телефона предотвратит превращение детекторов данных в ссылку.

(604) 555<span></span> -4321

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

Если вы ориентируетесь на электронные письма, вот еще одно уродливое, но работающее решение для ya'll:

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

will cease operations <span class='ios-avoid-format'>on June 1,
2012</span><span></span>.

и CSS, который сделает волшебство:

@media only screen and (device-width: 768px) and (orientation:portrait){
span.ios-date{display:none;}
span.ios-date + span:after{content:"on June 1, 2012";}
}

недостаток: вам может понадобиться медиа-запрос для каждого ipad / iphone портрет/пейзаж комбо


вы можете попробовать кодировать их как HTML-объекты:

&#48; = 0
&#57; = 9

та же проблема в приложении Sencha Touch решена с помощью мета-тега (<meta name="format-detection" content="telephone=no">) в индексе.html приложения.


этот ответ превосходит все, начиная с 6-13-2012:

<a href="#" style="color: #666666; 
                   text-decoration: none;
                   pointer-events: none;">
  Boca Raton, FL 33487
</a>

измените цвет на то, что соответствует вашему тексту, текстовое оформление удаляет подчеркивание, события указателя останавливают его просмотр как ссылку в браузере (указатель не изменяется на руку)

это идеально подходит для HTML-писем на ios и браузере.


трюк, который я использую, работает не только на мобильном сафари, чтобы использовать HTML escape-коды и небольшую наценку в номере телефона. Это затрудняет браузеру "идентификацию" номера телефона, т. е.

Phone: 1-8&#48;&#48;<span>-</span>62&#48;<span>-</span>38&#48;3

почему вы хотите удалить ссылку, это делает его очень удобным для пользователя, чтобы иметь Th eoption.

Если вы просто хотите удалить автоматическое редактирование, но сохранить ссылку, просто добавьте это в свой CSS...

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

у меня тоже есть эта проблема: Safari и другие мобильные браузеры преобразуют идентификаторы НДС в телефонные номера. Поэтому я хочу, чтобы чистый метод избегал его на одном элементе, а не на всей странице (или сайте).
Я делюсь возможным решением, которое я нашел, оно неоптимально, но все же довольно жизнеспособно: я помещаю, внутри числа я не хочу становиться tel: ссылке &#8288; HTML-объект, который является слово-Столяр невидимый символ. Я пытался оставаться более семантическим (ну, по крайней мере, вроде), поместив этот символ в какое-то место значения, например, для идентификатора НДС, я решил поместить его между различными группами цифр в соответствии с формат поэтому для итальянского НДС я написал:0613605&#8288;048&#8288;8 который отображает в 06136050488 и не преобразуется в номер телефона.


другой вариант-заменить дефисы в вашем номере телефона символом (U+2011 'Unicode Неразрывный Дефис')


Я был действительно смущен этим некоторое время, но, наконец, понял это. Мы внесли обновления на наш сайт и некоторые номера преобразовывались в ссылку, а некоторые нет. Оказывается, что числа не будут преобразованы в ссылку, если они находятся в

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

разбить число на отдельные блоки текста

301 <div style="display:inline-block">441</div> 3909

другим решением было бы использовать изображение номер IP