Как известно разработчики браузеров стараются максимально затачивать браузер под тип устройства, на котором он должен работать. Таким образом, браузер мобильного устройства максимально заточен для работы на мобильном устройстве, и проявляется это в наличии некоторых особенностей, которых нет в десктопной версии браузера. Про одну такую особенность мы поговорим далее.
При наличии комбинаций цифр похожих на номер телефона, некоторые мобильные браузеры интерпретируют их в виде активных кнопок, при клике на которые можно произвести набор номера.
Всё вроде здорово, и это создает удобство для пользователя, который может набрать указанный номер телефона с помощью простого клика по нему, но есть ещё один момент, который иногда озадачивает разработчиков (тех, кто с этим не сталкивался) – это стилизация номера телефона в мобильной версии браузера.
Эта задача решается довольно просто, на которую достаточно выделить несколько минут для её решения. Если немного вникнуть в то, что делает браузер, то можно понять, что при определении браузером номера телефона, он заключает эту строку в тег «a», а как мы знаем этот тег является обычной ссылкой, которую при необходимости мы можем так же стилизовать.
По умолчанию номера телефона на странице вашего сайта будут отображаться так, как задан стиль для ваших ссылок на странице, к примеру, это может быть так:
a {
color: #4b4b4b; /* цвет ссылок */
text-decoration: underline; /* подчеркивание ссылок */
}
Таким образом, этот стиль будет задан глобально для всех ссылок на странице, но такой метод не всегда подходит, и иногда необходимо стилизовать ссылку на номер телефона немного иначе. Для этого заключаем номер телефона в блок «div» и присваиваем ему какой-либо CSS класс.
<div class="phone"> +7 771 800 00 52 </div>
После этого у нас есть возможность стилизовать данный номер как в десктопной версии, так и в мобильной версии.
Стилизуем номер для десктопной версии браузера:
.phone {
color: #f1f1f1; /* меняем цвет ссылок */
text-decoration: none; /* отключаем подчеркивание ссылок */
}
Если для мобильной версии браузера требуется сделать аналогичное отображение номера, то достаточно прописать этот стиль для ссылки заключенной в этот блок:
.phone,
.phone a {
color: #f1f1f1; /* меняем цвет ссылок */
text-decoration: none; /* отключаем подчеркивание ссылок */
}
Довольно просто, не так ли? Аналогичным образом вы можете стилизовать все необходимые записи номеров на страницах вашего сайта для мобильной версии браузера.
