Use svh for a stable height with browser controls visible; use dvh when the element should follow the changing viewport. Traditional vh can represent a height that lets visible mobile browser controls obscure some content. 12
Choose the behavior, not the newest abbreviation
100svh uses the small viewport. It helps keep an initial-screen button from sitting beneath browser controls, although space may become available when those controls retract.
100dvh follows the dynamic viewport. That can suit a screen-filling panel, but it can also resize layout during scrolling. It is not automatically the best choice for every section. 1
A simple content-section example
.hero {
min-height: 100vh;
min-height: 100svh;
}
Using min-height leaves room for longer content. A fixed height combined with hidden overflow can make text or a button unreachable.
Test with browser controls visible and hidden, in landscape, and with enlarged text. For forms, test the on-screen keyboard separately: changing a viewport unit does not solve every keyboard or safe-area layout issue.
Choose the unit according to the movement the visitor should experience. A stable hero section and a dynamically filling dialog do not have to use the same sizing strategy.
