В лендингах, paywall, onboarding, SaaS-кабинетах и дизайн-системах первый экран часто должен занять видимую высоту. Типичная ошибка - ставить
height: 100vh и получать CTA под нижней панелью браузера или home indicator.Единицы viewport
•
100svh - высота при раскрытых панелях браузера: безопасно, но может дать запас.•
100lvh - высота при скрытых панелях: годится для фона, рискованна для контента.•
100dvh - текущая видимая высота: хороший выбор для экранов состояния.•
env(safe-area-inset-bottom) - защита CTA от системных зон.Production-паттерн
.screen{
min-height:100vh;
min-height:100svh;
min-height:100dvh;
display:flex;
flex-direction:column;
padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
}
.screen__content{flex:1;min-height:0}
.screen__cta{position:sticky;bottom:max(16px,env(safe-area-inset-bottom))}Trade-off
dvh пересчитывается при изменении browser chrome и может давать визуальные скачки. Не вешайте height: 100dvh на длинные страницы: для hero, modal screen и onboarding чаще безопаснее min-height, чтобы контент мог вырасти.Практическое правило
• full-screen состояние -
min-height: 100dvh• максимально стабильный первый экран -
100svh• декоративный фон - можно
lvh• нижний CTA - padding/bottom через
max(..., env(safe-area-inset-bottom))Вывод:
Мобильная верстка больше не сводится к
100vh: выбирайте viewport-единицу под сценарий и всегда резервируйте safe-area.