Большие, маленькие и динамические единицы видового экрана.

Новые модули CSS, учитывающие мобильные области просмотра с динамическими панелями инструментов.

Брамус

Окно просмотра и его единицы измерения

Чтобы изменить размер объекта размером с область просмотра, вы можете использовать единицы измерения vw и vh .

  • vw = 1% ширины области просмотра.
  • vh = 1% от высоты размера области просмотра.

Присвойте элементу ширину 100vw и высоту 100vh , и он полностью закроет область просмотра.

Голубой элемент размером 100vw на 100vh, охватывающий всю область просмотра. Сам видовой экран обозначен синей пунктирной рамкой.
Голубой элемент размером 100vw на 100vh, охватывающий всю область просмотра.
Сам видовой экран обозначен синей пунктирной рамкой.

Единицы vw и vh появились в браузерах вместе с этими дополнительными единицами.

  • vi = 1% от размера встроенной оси области просмотра.
  • vb = 1% от размера оси блока области просмотра.
  • vmin = меньшее из vw или vh .
  • vmax = большее из vw или vh .

Эти устройства имеют хорошую поддержку браузеров.

Поддержка браузера

  • 20
  • 12
  • 19
  • 6

Потребность в новых единицах видового экрана

Хотя существующие устройства хорошо работают на настольных компьютерах, на мобильных устройствах дела обстоят иначе. Там на размер области просмотра влияет наличие или отсутствие динамических панелей инструментов. Это пользовательские интерфейсы, такие как адресные строки и панели вкладок.

Хотя размер области просмотра может меняться, размеры vw и vh — нет. В результате элементы высотой 100vh будут выходить за пределы области просмотра.

100vh на мобильном устройстве слишком велико при нагрузке.
100vh на мобильном устройстве слишком велико при нагрузке.

При прокрутке вниз эти динамические панели инструментов убираются. В этом состоянии элементы высотой 100vh будут занимать всю область просмотра.

100vh на мобильных устройствах является «правильным», когда пользовательские интерфейсы User-Agent убраны.
100vh на мобильных устройствах является «правильным», когда пользовательские интерфейсы User-Agent убраны.

Чтобы решить эту проблему, в рабочей группе CSS были определены различные состояния области просмотра.

  • Большой экран просмотра : размер окна просмотра рассчитан с учетом того, что все интерфейсы UA, которые динамически расширяются и убираются, будут убраны.
  • Малый экран просмотра : размер окна просмотра рассчитан с учетом того, что любые интерфейсы UA, которые динамически расширяются и убираются, будут расширены.
Визуализации больших и малых видовых экранов.
Визуализации больших и малых видовых экранов.

Новым видовым экранам также назначены единицы измерения:

  • Единицы, представляющие большую область просмотра, имеют префикс lv . Единицы измерения: lvw , lvh , lvi , lvb , lvmin и lvmax .
  • Единицы, представляющие небольшую область просмотра, имеют префикс sv . Единицы измерения: svw , svh , svi , svb , svmin и svmax .

Размеры этих процентных единиц области просмотра фиксированы (и, следовательно, стабильны), если только размер самой области просмотра не изменен.

Две визуализации мобильного браузера, расположенные рядом друг с другом. У одного есть элемент размером 100svh, а у другого — 100lvh.
Две визуализации мобильного браузера, расположенные рядом друг с другом.
У одного есть элемент размером 100svh, а у другого — 100lvh.

В дополнение к большому и маленькому окнам просмотра существует также динамическое окно просмотра, в котором динамически учитывается пользовательский интерфейс пользователя:

  • Когда динамические панели инструментов развернуты, динамическая область просмотра равна размеру маленькой области просмотра.
  • Когда динамические панели инструментов убраны, динамическое окно просмотра равно размеру большого окна просмотра.

Сопутствующие ему единицы имеют префикс dv : dvw , dvh , dvi , dvb , dvmin и dvmax . Их размеры ограничены между их аналогами lv* и sv* .

100dvh адаптируется как к большому, так и к маленькому размеру области просмотра.
100dvh адаптируется как к большому, так и к маленькому размеру области просмотра.

Эти устройства поставляются в Chrome 108, присоединяясь к Safari и Firefox, которые уже поддерживаются.

Поддержка браузера

  • 108
  • 108
  • 101
  • 15,4

Предостережения

Есть несколько предостережений, которые следует знать о единицах видового экрана:

  • Ни одна из единиц области просмотра не учитывает размер полос прокрутки. Поэтому в системах, в которых включены классические полосы прокрутки, элемент размером 100vw будет слишком широким. Это согласно спецификации .

  • Значения для динамической области просмотра не обновляются при частоте 60 кадров в секунду. Во всех браузерах обновление ограничивается по мере расширения или закрытия пользовательского интерфейса. Некоторые браузеры даже полностью отключают обновление в зависимости от используемого жеста (медленная прокрутка или пролистывание).

  • Экранная клавиатура (также известная как виртуальная клавиатура) не считается частью пользовательского интерфейса UA. Поэтому это не влияет на размер единиц области просмотра. В Chrome вы можете выбрать вариант, при котором наличие виртуальной клавиатуры не влияет на единицы области просмотра .

Дополнительные ресурсы

Чтобы узнать больше об областях просмотра и этих единицах измерения, посмотрите этот выпуск HTTP 203 . В нем Брамус рассказывает Джейку все о различных окнах просмотра и объясняет, как именно определяются размеры этих единиц.

Дополнительный материал для чтения: