Фото Ілана Дова на Unsplash
Якщо вам доводилося перевіряти, коли ваш сайт відкривається на сенсорному пристрої і/або перевіряти, чи знаходиться режим перегляду в вертикальній (portrait) орієнтації, ви можете знайти рішення тут.
За допомогою однієї CSS-правила ми досягнемо цього результату.
Це сенсорний пристрій?
Щоб дізнатися, чи має пристрій, який переглядає нашу сторінку, технологію сенсорного введення, можна вставити таке правило у наш CSS файл:
@media (pointer: coarse) {
/* деякі цікаві речі */
}
Таким чином, ми зможемо налаштувати досвід користувача для тих, хто використовує сенсорний екран як основний пристрій введення.
Я навмисно використав термін “основний пристрій введення”, оскільки це правило включає не тільки пристрої, на яких є лише сенсор (наприклад, мобільні пристрої та/або планшети), але й, наприклад, монітори з технологією сенсорного введення.
Інші можливі значення для pointer:
- none: якщо немає пристроїв введення
- fine: якщо основним пристроєм введення є пристрій "точного" введення, наприклад, класична миша
Вертикальний або горизонтальний режим перегляду
І тут нам знову на допомогу приходить CSS з його правилом @media.
@media (orientation: portrait) {
/* деякі цікаві речі */
}
За допомогою наведеного коду, ми можемо додавати CSS-правила, які будуть діяти тільки у разі, якщо орієнтація екрану вертикальна. Замінивши portrait на landscape, ми охопимо протилежний випадок, тобто коли viewport знаходиться в горизонтальному режимі.
Важливо!
- Описане вище працює в режимі реального часу, тому при зміні орієнтації пристрою з вертикальної на горизонтальну та навпаки, відповідні правила будуть застосовуватися кожного разу.
- Як зазначалося раніше, ці правила відносяться до viewport, що не завжди збігається з фактичною орієнтацією пристрою (наприклад, на мобільних телефонах відкриття клавіатури може змінити співвідношення viewport і зробити його фактично горизонтальним).
Висновки
CSS часто є найшвидшим і найефективнішим рішенням для операцій, які в іншому випадку вимагали б використання Javascript.
Дякую за прочитання моєї статті! Перед тим як піти:
- Якщо вам сподобалося, ви можете поставити "клас" і/або підписатися на мене тут на medium 👏
- Ви також можете знайти мене на X та Github 🌐
Перекладено з: CSS — Touch e/o Portrait