CSSの100vhがスマホで高さいっぱいにならない問題はこれで解決！ CSSの新しいビューポート単位の使い方と注意事項

先日リリースされたChrome 108で、CSSの新しいビューポート単位（svh, lvh, dvhなど）がサポートされました。SafariとFirefoxではすでにサポートされていましたが、Chromeでもサポートされたのは朗報です。 この新しいビューポート単位の基本的な使い方と注意事項を紹介します。 The large, small, and dynamic viewport units by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに おさらい: ビューポートとその単位 新しいビューポート単位の必要性 注意事項 リソース はじめに 先日リリースされたChrome 108で、動的なバーがあるスマホのビューポートを考慮したCSSの新しいビューポート単位がサポートされました。SafariとFirefoxではすでにサポート

[coliss]

CSSの新しいビューポート単位でiOSのSafariで100vhがビューポートの高さではない仕様に対応できます。

[nicht-sein]

しゃーないけれど、どうしてもパッチワーク的な印象を受けるよね

[hayashikousun]

元はと言えばスマホのブラウザがCSSの仕様を軽視して描画領域の大きさを変えずにアドレスバーを出したり引っ込めたりしたのが原因だと思う。その内猫が画面の前を横切った時のビューポートにも対応するんじゃないか？

[tomono-blog]

これって新しいギミックUIが増えるたびに、単位が増えたりしないの??

[noseld]

知らなかった。これは便利！

[mayumayu_nimolove]

もう新規はsvhでいいや

[solidstatesociety]

時間かかったな