Як відомо розробники браузерів намагаються максимально заточувати браузер під тип пристрою, на якому він повинен працювати. Таким чином, браузер мобільного пристрою максимально заточений для роботи на мобільному пристрої, і це проявляється у наявності деяких особливостей, яких немає в десктопної версії браузера. Про одну таку особливість ми поговоримо далі.
При наявності комбінацій цифр схожих на номер телефону, деякі мобільні браузери інтерпретують їх у вигляді активних кнопок, при натисканні на які можна зробити набір номера.
Все начебто добре, і це створює зручність для користувача, який може набрати вказаний номер телефону з допомогою простого кліка по ньому, але є ще один момент, який іноді спантеличує розробників (тих, хто з цим не стикався) – це стилізація номера телефону в мобільній версії браузера.
Ця задача вирішується досить просто, на яку досить виділити кілька хвилин для її вирішення. Якщо трохи заглибитися в те, що робить браузер, то можна зрозуміти, що при визначенні браузером номера телефону, він укладає цей рядок в тег «a», а як ми знаємо цей тег є звичайною посиланням, яку при необхідності ми можемо так само стилізувати.
За замовчуванням номера телефону на сторінці вашого сайту будуть відображатися так, як визначити стиль для ваших посилань на сторінці, наприклад, це може бути так:
a {
color: #4b4b4b; /* колір посилань */
text-decoration: underline; /* підкреслення посилань */
}
Таким чином, цей стиль буде поставлено глобально для всіх посилань на сторінці, але такий метод не завжди підходить, і іноді необхідно стилізувати посилання на номер телефону трохи інакше. Для цього укладаємо номер телефону в блок «div» і присвоюємо йому який-небудь CSS клас.
+7 771 800 00 52
Після цього у нас є можливість стилізувати цей номер як в десктопної версії, так і в мобільній версії.
Стилізуємо номер для десктопної версії браузера:
.phone {
color: #f1f1f1; /* міняємо колір посилань */
text-decoration: none; /* відключаємо підкреслення посилань */
}
Якщо для мобільної версії браузера потрібно зробити аналогічне відображення номера, то достатньо прописати цей стиль для посилання укладеної у цей блок:
.phone,
.phone a {
color: #f1f1f1; /* міняємо колір посилань */
text-decoration: none; /* відключаємо підкреслення посилань */
}
Досить просто, чи не так? Аналогічним чином ви можете стилізувати усі необхідні записи номерів на сторінках вашого сайту для мобільної версії браузера.
Додав: htmaker, 28.02.2018 р.
(Ще не оцінили)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript
Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
Анімація набору тексту на JQuery плагіні — TypeIt
Рубрика: Html, CSS, Javascript
