[PT-BR] CSSのビューポート単位：VHを超えて

まあ、この文章はちょっと感動したことを皆に伝えたい人が書いたものなんです。何時間か前まで、vh/vw以外にビューポート単位があるなんて知らなかったんですよ。どうやって気付いたかって？レスポンシブデザインの問題を解決しようと色々探していて、ページの高さ100%になるモーダルを実装したんです。だから「100vh」はデスクトップではばっちり機能したんですけど、問題が出てきたのはモバイルデバイスでテストした時でした。下で問題と解決方法について説明します。

この記事では、CSSの新しいビューポート単位、svh、svh、dvhについて少し話してみます。でもその前に、もっと深く理解する前にいくつかのことを理解しましょう。

ビューポートって何？

端的に言うと、ビューポートっていうのはウェブページがデバイス上で表示される見える領域のことです。当然ながらビューポートのサイズはデバイスやブラウザーによって異なりますし、ユーザーがブラウザーのウィンドウをリサイズすることで変わることもあります。

VH — ビューポートの高さ

「VH」はCSSのモジュール3で導入されたCSSの相対単位で、ページの要素を画面サイズに応じてサイズ変更することができ、レスポンシブレイアウトを作ることができます。つまり、「vh」はビューポート高さのパーセンテージを表しています。

1vh = ビューポート高さの1%

.foo {
  height: 50vh;  /* 要素はビューポートの高さの50%になります */
}

VHの問題点

「vh」は多くの改善をもたらしましたが、デスクトップでの利用ではあります。しかしモバイルデバイスではいくつかの問題がありました。というのも、画面の一部を占めるナビゲーションバーを持つブラウザがあるからです。通常このバーはページのコンテンツの上にあり、ユーザーがページをスクロールする方向に応じて動的に拡大したり縮小したりします。そのため、「vh」は一部のデバイスで予期せぬ振る舞いをすることがあります。

こうした問題のため、コミュニティはいくつかの解決策を議論しました。

SVH — スモールビューポートの高さ

「svh」はナビゲーションバー（または他のブラウザアイテム）が拡大されたときのビューポートのサイズを考慮して定義される単位です。つまり、ブラウザが可能な限り多くのスペースを占めるとき、ページのコンテンツは可能な限り小さくなります。

例えば下の例のように、「100svh」はナビゲーションバーが拡大された状態の画面スペースを占め、バーの下に「余分な」コンテンツが出ないようにします。

.container {
    height: 100svh; /* 要素はUIが拡大されている状態のビューポートの高さになります */
}

いつ使用するか：
ブラウザのUIにコンテンツが隠れることがないようにしたいとき。

いつ避けるべきか：
ブラウザのUIが縮小しているときは、余分な空白ができるかもしれないので。

LVH — ラージビューポート単位

一方、「lvh」は「svh」とは逆で、ナビゲーションバーまたは他のブラウザアイテムが縮小されたときのビューポートのサイズを考慮して定義されます。つまり、ブラウザが可能な限り少なくスペースを占めるとき、ページのコンテンツは可能な限り大きくなります。それは、実際には「lvh」は「vh」と似たような働きをします。

.container {
    height: 100lvh; /* 要素はUIが縮小されている状態のビューポートの高さになります */
}

いつ使用するか：
ブラウザのUIが縮小されているときにコンテンツのスペースを最大化したいとき。

いつ避けるべきか：
ブラウザのUIが拡大されているときは、コンテンツが隠れる可能性があるので。

DVH — ダイナミックビューポート単位

ダイナミックビューポート、その名の通り、動的です。ブラウザのUIが拡大されても縮小されても、自動的にコンテンツのサイズを調整・適応させます。これが完璧な解決策のように思えるかもしれませんが、注意が必要です。なぜなら、「dvh」を使用すると、ユーザーがページをスクロールするときにコンテンツのサイズが再調整されることがあり、これが不快感を与えたり、ユーザーエクスペリエンスを悪化させたりする可能性があるからです。また、パフォーマンスにも影響を与えるかもしれません。

.container {
    height: 100dvh; /* 要素の高さはブラウザのUIに応じて動的に調整されます */
}

いつ使用するか：
ブラウザのUIが変わるに応じて高さを動的に調整したいとき。

いつ避けるべきか：
動的な再サイズがユーザーを気が散らせたり、ユーザー体験に悪影響を与える可能性があるとき。

この例をCodePenで見てみてくださいビューポート例

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/leomunizq/unidades-de-viewport-no-css-alem-do-vh-pt-br-4j77