https://coliss.com/articles/build-websites/operation/css/css-large-small-dynamic-viewport-units.html
dvh は使い所が多そう。
要点
- Large viewport
- ≒ スマートフォンのブラウザで、アドレスバーなどが隠れた状態
- 適応した CSS の Length プロパティとしては
lvh,lvwがある
- Small viewport
- ≒ スマートフォンのブラウザで、アドレスバーなどが表示された状態
- 適応した CSS の Length プロパティとしては
svh,svwがある
- Dynamic viewport
- Large/Small viewport が動的に切り替わることを考慮したビューポート
- 適応した CSS の Length プロパティとしては
dvh,dvwがある - これを使えば、スマートフォンで動的にビューポートが切り替わるケースでもいい感じに対応できる場合がある
- 適応した CSS の Length プロパティとしては
- Large/Small viewport が動的に切り替わることを考慮したビューポート
Sample
https://mryhryki.com/experiment/css-viewport-length.html