Главная » 2018 » Апрель » 14 »

Основи чуйного веб-дизайну


23:07

Основи чуйного веб-дизайну

Число користувачів, що виходять в Інтернет з мобільних пристроїв, стрімко зростає, але, на жаль, більшість мережевих ресурсів не пристосоване для цього. Для кожного мобільного пристрою необхідний особливий підхід до розташування контенту на екрані з-за обмеженого розміру дисплея.

Налаштування області перегляду

Сторінки, адаптовані для перегляду на різних пристроях, повинні містити в контейнері head-тег viewport. Він повідомляє браузеру, яким чином потрібно контролювати розміри і масштаб сторінки.

TL; DR

Щоб контролювати масштабування вікна перегляду в браузері, використовуйте метатег viewport.
Додайте width = device-width, щоб адаптувати ширину вікна перегляду до екрану пристрою.
Вставте initial-scale = 1, щоб забезпечити співвідношення 1: 1 між пікселями CSS і незалежними пікселями пристрою.
Щоб сторінка була доступна, перевірте, чи не відключено чи призначене для користувача масштабування.

Намагаючись поліпшити роботу з сайтами, мобільні браузери відображають сторінку · тієї ж ширини, що і на екрані ПК (зазвичай вона складає близько 980 пікселів, але на різних пристроях може відрізнятися). Після цього браузер збільшує розмір шрифтів і змінює розмір контенту, щоб вмістити сторінку на екрані. В результаті користувачі бачать різні шрифти, і для роботи з сайтом їм доводиться збільшувати його масштаб.


<meta name="viewport" content="width=device-width, initial-scale=1.0">

Щоб сторінка підлаштувалася під ширину потрібного екрану (в незалежних пікселях), використовуйте метатег viewport width = device-width. З його допомогою розмір і положення контенту зміняться, і сайт буде добре виглядати на будь-якому пристрої.

Деякі браузери не редагують ширину сторінки і розмір контенту, а змінюють орієнтацію сайту на альбомну або збільшують масштаб. За допомогою атрибута initial-scale = 1 можна вказати браузеру співвідношення пікселів CSS і пристрої, що дорівнює 1: 1 незалежно від орієнтації дисплея. Завдяки цьому сторінка буде краще виглядати в альбомної орієнтації.

источник: https://developers.google.com/web/fundamentals/design-and-ux/responsive/?hl=ru

Категория: Веб основи | Просмотров: 17 | Добавил: Uainetatua | Теги: Основи чуйного веб-дизайну | Рейтинг: 0.0/0
Всего комментариев: 0
avatar
Лицензия Creative Commons
Это произведение доступно по лицензии Creative Commons С указанием авторства 4.0 Всемирная.