これまでのvhとsvh/lvh/dvh

モバイル端末において、vhではアドレスバーなどの高さを考慮しない端末のビューポートサイズがセットされる仕様となっており、ファーストビューで1画面にきっちり納めたい場合にJSを使うなど、ややモヤっとする対応をしてきていましたがsvh/lvh/dvhなどの単位の登場でCSSのみでシンプルに構築できるようになったかと思います。

それぞれの単位の挙動について

すでに多くのサイトで図解付きで解説されておりますので、あえて詳細の説明は省きますが実機でどのような動作となるかを動画で紹介していければと思います。

iPhone端末はリモートテストキット上の動画となるため動作がもっさりしています。ご容赦ください。

実機で確認してみたい方は以下よりご確認ください。
https://www.heion.net/demo/vh.html

dvhは万能ではなさそう

dvhはユーザの操作などによって、見えている画面の高さに応じてサイズが自動的に変動する単位となります。

これだけ聞くととりあえずdvhにしておけばいいんじゃないかと思いがちですが、実機で確認すると特にAndroid上ではスクロールを停止した後に高さを再描画するようですので上下にスクロールさせるとその都度ガクガク動いて違和感がありそうです。
（OSやブラウザのバージョンによっては今後動作が変わってくるかもしれませんが）

たとえば「ファーストビューにきれいに納めたい」を実現するだけであれば、svhを採用するのが無難そうですが、
100ｖｈの要素が複数セクションあるような場合、すべてのセクションをsvhで書くとしたスクロール時に隙間ができてしまいますので、ファーストビュー以降のセクションはdvh（あるいはvh/lvh）にするなど、適宜選択していく必要がありそうですね。