В чем нюанс vh на мобильных устройствах?

Нюанс `vh` на мобильных в том, что `100vh` не учитывает динамические панели браузера (адресную строку), из-за чего элемент оказывается выше видимой области и появляется прокрутка или обрезка.

Проблема

100vh = 100% высоты viewport, но на мобильных браузерах адресная строка и панели появляются и скрываются при скролле. Браузер считает vh относительно полной высоты (без учёта видимых панелей), поэтому height: 100vh часто больше реально видимой области:

.hero { height: 100vh; } /* на мобильном "вылезает" под адресную строку */

В результате — лишняя прокрутка или обрезанный контент внизу.

Решения

Новые единицы viewport (dvh/svh/lvh)

.hero { height: 100dvh; } /* dynamic viewport height — учитывает панели */

• dvh — динамическая (подстраивается под панели).
• svh — small (минимальная видимая, с панелями).
• lvh — large (максимальная, без панелей).

JS-переменная (старый способ)

const setVh = () => document.documentElement.style
  .setProperty('--vh', `${window.innerHeight * 0.01}px`);
setVh();
window.addEventListener('resize', setVh);

.hero { height: calc(var(--vh, 1vh) * 100); }

Коротко для собеседования

Нюанс: 100vh на мобильных не учитывает динамическую адресную строку — считается от полной высоты, поэтому элемент выше видимой области (прокрутка/обрезка). Решают новыми единицами dvh/svh/lvh (динамический viewport) или JS-переменной на window.innerHeight.