Viewport-единицы измерения vh
и vw
в CSS появились относительно недавно. На настоящий момент, согласно сайту caniuse.com, поддержку этих единиц измерений имеют 82.96% от всех используемых в мире браузерах, и я думаю, что уже наступило то время, когда эти единицы можно использовать без ограничений. Ограничений нет, но есть нюансы использования vh
на мобильных устройствах: к примеру, в мобильном Chrome’е, при скролле омнибар то скрывается, то появляется, и это влияет на значение vh
.
Такое поведение не всегда приемлемо. Для решения этой проблемы я набросал следующий код:
Идея заключается в том, что, по сути, делается небольшой полифилл для vh
, но перерасчет значений не выполняется, если изменилась только высота и это изменение в пределах 100px
.