Главная
Web-дизайн
Как отключить преобразование телефонных номеров в ссылки на мобильных.

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

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

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

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

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

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




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


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 3, в среднем: 5 из 5

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

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий
X

Привет дорогой друг

У тебя установлено расширение AdBlock или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие. Инструкция как отключить AdBlock Хочу такое же окошко