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

https://stackoverflow.com/questions/226131

03-07-2019
|

Вопрос

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

Решение

Похоже, что это правильно, в соответствии с Справочник по Safari HTML :

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

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

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

Другие советы

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

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

Первое правило отключает щелчок, второе - стилизацию.

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

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

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

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

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

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

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

Для приложений PhoneGap-iPhone / PhoneGap-iOS вы можете отключить определение телефонных номеров, добавив в свой проект следующее: & # 8217; делегат приложения s:

// ...

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

    return [ super webViewDidStartLoad:theWebView ];
}

// ...

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

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

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

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

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

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

Пример следующим образом:
<a href="javascript: void(0)">+44 456 77 89 87</a>

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

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

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

также ...

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

...сработало.

Но вот три уродливых взлома:

замена цифры "0" на букву "О"
замена цифры "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">

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

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

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

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

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

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

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

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

Пример некоторого 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 Portrait / Landscape

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

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

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

Я использую хитрость, которая работает не только с Mobile Safari, а заключается в использовании escape-кодов HTML и небольшой разметки в номере телефона. Это делает браузер более трудным для & Определения & Quot; номер телефона, т.е.

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

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

Другой вариант - заменить дефисы в номере телефона символом ‑ (U + 2011 «Unicode Non-Breaking Hyphen»)

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

Этот ответ превосходит все по состоянию на 6-13-2012:

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

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

Это идеально подходит для электронных писем в формате HTML на iOS и в браузере.

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow