X
Заказать услугу

Как отключить преобразование телефонных номеров в ссылки на мобильных.

Плагины и Шаблоны для Wordpress
  • 2019-05-27
  • 2517 просмотр

    0 комментарий

  • Дизайн и разработка сайта

Доброго времени суток. 🙂

Если вы занимаетесь версткой, то рано или поздно столкнетесь с проблемой автозамены телефонных номеров в ссылки на мобильных устройствах. То есть, если в написали на сайте номер обычным текстом, то мобильные браузеры Android и iOS (Safari) автоматически преобразовывают обычный текст в ссылку. Делается это для удобства пользователя, чтобы он смог сразу позвонить, но иногда автозамена работает не корректно и не весь номер выделяется. Так же преобразование номера в ссылку влечет за собой изменение стилей номера. Вы могли задать какие-то CSS стили элементу с номеров, а преобразование, естественно сделает так, что номер станет просто синим подчеркнутым текстом. Как понимаете, это может не совсем корректно отобразится среди остального дизайна сайта.

Как отключить преобразование телефонных номеров в ссылки на мобильных.

Избавится от такого эффекта можно несколькими способами. Можно просто самому сделать из телефона ссылку и задать ей нужные стили, а путь ссылки указать используя :tel. Если у вас был просто номер +1234567890. То лучше его сделать таким:

<a class="tel_link" href="tel:+1234567890">+1(234)567-890</a>

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

Но, бывает так, что номеров на сайте много или нет времени переделывать их на ссылки, ну или просто ссылки вам не хочется делать, то можно воспользоваться МЕТА-тегом. Добавляете его к другим мета тегам вашего сайта в шапке и все.

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

Данный тег запретит устройствам работающим на iOS(iPhone / IPod / IPad) и Android делать из номеров ссылки. Так же можно еще добавить мета-тег для устройств - BlackBerry

<meta http-equiv="x-rim-auto-match" content="none">

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

На этом все, спасибо за внимание. 🙂

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 3, в среднем: 5 из 5
Читайте также
Комментариев нет. Оставьте первый

Добавить комментарий

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.