Обзор статьи
Браузеры выпустили новый набор CSS viewport units в 2022 году. Эти единицы облегчают размер элементов в мобильных браузерах, где интерфейс браузера влияет на высоту области просмотра при прокрутке страницы пользователем. К сожалению, новые единицы не облегчают размер элементов в настольных браузерах, где классические полосы прокрутки влияют на ширину и высоту области просмотра.
Два типа области просмотра
Существует два разных области просмотра в веб-браузерах: визуальный области просмотра и области просмотра макета. Когда страница впервые загружается в браузере, визуальный области просмотра и области просмотра макета имеют точно такой же размер и положение.
Два типа зума
Два типа зума определены в модуле CSSOM View: зум страницы и зум с коэффициентом масштабирования. Зум страницы доступен в настольных браузерах. Зум с коэффициентом масштабирования доступен на всех платформах.
Элементы позиционирования
Область просмотра макета является "содержащим блоком" для элементов с фиксированным позиционированием. Начальный содержащий блок (ICB) - это прямоугольник, который расположен в верхней части веб-страницы. ICB является обычным содержащим блоком для абсолютно позиционированных элементов.
Единицы обзора CSS
Единицы обзора CSS основаны на области просмотра макета и не изменяются при изменении размера визуального области просмотра. Оригинальные шесть единиц обзора появились в браузерах десять лет назад. Новые единицы появились в основных браузерах в течение последнего года.
Полосы прокрутки
В веб-браузере полосы прокрутки могут быть классическими или наложенными. На мобильных платформах полосы прокрутки исключительно наложенные. На настольных платформах пользователь может выбрать тип полосы прокрутки в настройках операционной системы. Главное различие между этими двуми типами полос прокрутки заключается в том, что классические полосы прокрутки помещаются в отдельный "желоб полосы прокрутки", который занимает место при наличии, что уменьшает размер области просмотра макета.
Проблема с полосами прокрутки и единицами обзора
Длина 100