動的ビューポート単位の使用

 (web.dev)
18 ポイント 投稿者 ragingwind 2022-11-30 | まだコメントはありません。 | WhatsAppで共有
  • デスクトップでは vw、vh は viewport のサイズを適切に表す
  • モバイルでは、ツールバーやアドレスバーのように動的に生成される UI によってサイズが影響を受ける。そのため 100vh は viewport のサイズを超えることがあり、スクロールなどでアドレスバーが縮むと viewport のサイズに合うようになる
  • CSS ワーキンググループは、このように動的に変化するサイズに対応して使える単位を提供しており、実際の viewport とぴったり合うサイズを指定できる
    • Large viewport: lvh は動的に生成される UI がない場合
    • Small viewport: svh は縮んでいた UI が再び拡張された場合
    • Dynamic viewport: dvh は動的 UI の状態に合わせて viewport サイズと同じになる。Chrome 108、Firefox 101、Safari 15.4 でサポート

関連記事

まだコメントはありません。

まだコメントはありません。