Единица измерения 100vh должна означать «вся высота экрана», но на мобильных браузерах она часто не учитывает динамически появляющуюся и исчезающую адресную строку, из-за чего блок оказывается обрезан или, наоборот, выше видимой области.
Почему мобильные браузеры ведут себя иначе
При прокрутке страницы адресная строка мобильного браузера может скрываться, увеличивая видимую область — but единица vh обычно рассчитывается по максимальной высоте экрана, а не по фактически видимой в данный момент, создавая несоответствие между расчётной и реальной высотой.
Решение — новые единицы измерения viewport
Современные CSS-единицы dvh (dynamic viewport height) учитывают фактическое изменение видимой области в реальном времени — там, где поддержка браузером это позволяет, замена 100vh на 100dvh для полноэкранных блоков решает проблему нативно, без JavaScript.
Альтернатива для более широкой совместимости
Для поддержки старых браузеров без dvh можно вычислять реальную высоту через JavaScript (window.innerHeight) и устанавливать её как CSS-переменную, обновляя при событии resize.
