X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-03-28
  • 7701 переглядів

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

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

Если вы занимаетесь версткой, то рано или поздно столкнетесь с проблемой автозамены телефонных номеров в ссылки на мобильных устройствах. То есть, если в написали на сайте номер обычным текстом, то мобильные браузеры 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
Читайте також