svh、lvh、dvhは、CSSで使用される高さの単位で、ビューポート（ブラウザの表示領域）の高さに基づいて要素のサイズを指定します。これらはvw（ビューポートの幅）と同じくビューポート単位に属しますが、高さの計算方法が異なります。レスポンシブなWebサイト、特にモバイルデバイス向けのデザインにおいて、これらの違いを理解することは非常に重要です。
vh (viewport height): 元々、vhは初期ビューポートの高さの1%として定義されていました。しかし、モバイルデバイスでは、ブラウザのユーザーインターフェース（UI）がスクロール時にサイズ変更されるため、高さの計算に不一致が生じる可能性があります。現在、vhは通常、ブラウザUIが最小化されたときの最大ビューポートの高さを基準に計算されます。そのため、ブラウザUIが大きい場合、コンテンツが画面からはみ出す現象が発生する可能性があります。
lvh (large viewport height): lvhは、現在のvhの動作と同様に、最大ビューポートの高さの1%として定義されています。lvhは、ブラウザUIのサイズに関係なく、要素の高さを常に最大ビューポートの高さにしたい場合に役立ちます。
svh (small viewport height): svhは、ブラウザUIが最大化されたときの最小ビューポートの高さの1%として定義されています。svhを使用すると、ブラウザUIが大きな領域を占めている場合でも、画面を埋め尽くすのに十分な高さの要素をデザインできます。svhは、ブラウザUIによってコンテンツが隠れてしまう状況を回避するのに役立ちます。
dvh (dynamic viewport height): dvhは、動的なビューポートの高さの1%として定義されています。つまり、ブラウザUIの変更を含め、現在のビューポートのサイズに基づいて高さが継続的に計算されます。dvhはコンテンツを常にビューポートにぴったり合わせるのに理想的に見えるかもしれませんが、継続的なサイズ変更はユーザーにぎこちない体験を引き起こし、パフォーマンスに影響を与える可能性があります。そのため、dvhは本当に必要な場合を除いて使用を控えるべきです。ユーザーがスクロールしたときに、コンテンツがジャンプしたり、サイズが突然変化したりする現象が発生する可能性があります。
結論として、svhとlvhは、ビューポートに基づいて高さを決定するためのより安定したアプローチを提供する一方、dvhは慎重に使用する必要があります。適切な単位の選択は、デザインの目的と desired user experience に依存します。lvhはサイズを維持し、svhはブラウザUIに合わせて縮小し、dvhはサイズを継続的に変更します。
