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

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


23:09

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

Для перегляду сайтів на звичайних комп'ютерах і мобільних пристроях використовується вертикальна прокрутка. Якщо користувачеві доводиться прокручувати сайт по горизонталі або зменшувати масштаб, щоб побачити сторінку повністю, він відчуває великі незручності.

TL; DR

Не використовуйте великі елементи з фіксованою шириною.
Для коректного відображення контенту не обмежуйте його певної шириною області перегляду.

Використовуйте медіазапроси CSS, щоб вказати різні стилі для великих і маленьких екранів.

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

Діапазон розмірів екрану і ширини в пікселях CSS дуже великий (наприклад, телефони можуть значно відрізнятися від планшетів або навіть від інших телефонів), тому відображення контенту не повинно залежати від конкретної ширини області перегляду.

Установка великих абсолютних значень ширини CSS для компонентів сторінки зробить div занадто великим для більш вузької області перегляду (наприклад, на пристроях шириною 320 пікселів CSS, таких як iPhone). Замість цього можна використовувати значення в відносних одиницях, наприклад width: 100%. Також намагайтеся уникати великих абсолютних значень позиціонування. Через них на маленькому екрані елемент може виявитися ЕА межами області перегляду.

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

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