15 подписчиков
Все мы часто используем в работе такие единицы измерения, как vh и vw, в основном, чтобы заставить какой-то блок растянуться на всю область видимости, указав для него width: 100vw; и height: 100vh;
Но почти всегда, во всяком случае я забываю, что на мобильных устройствах это будет работать не совсем так, как ожидается.
Дело в том, что у мобильных браузеров есть два режима отображение собственного интерфейса - полноценная версия, и более компактная, которая появляется при скролле. Обратите внимание на панель браузера, когда скроллите какой-то сайт на телефоне - она в какой-то момент будет “ужиматься”.
Чтобы учесть это, лучше всего заменять vh и vw на dvh и dvw, единицы измерения для динамического вьюпорта. На десктопных браузерах они будут работать без изменений, а вот на мобильных при любом из вариантов отображения браузера - компактном или полноценном - будут подстраиваться под него. Если же все время использовать vh и vw, то при отображении полноценной навигации в браузере будет появляться дополнительный скролл. Этот эффект можно наглядно увидеть на примере с Doka (откройте его с мобильного браузера).
К тому же, если верить MDN, у новых значений на данный момент есть полная поддержка на всех современных браузерах. Пожалуй, стоит пойти и заменить все vh и vw на моих проектах на новые единицы.
1 минута
25 ноября 2024