全画面表示の高さは100vhで大丈夫？ | 鹿児島市でホームページ・SNSを集客に活かすならコーディングデザイン

コーディングデザインのフロントエンドHTML&CSSデベロッパー森です。 軽く実装出来ると思いきやなかなか悩ましい全画面表示の話です。 Webページの最上部は訪問者にインパクトを残すために背景に動画や画像を入れて全画面表示にすることがあります。 この表現を実現する方法はいくつもあります。 html, body, 対象の要素の高さをすべて100%にする対象の要素の高さを100vhにするmin-height: -webkit-fill-available; を使うJavaScriptでウインドウの高さを測って対象の要素に高さ設定 基本的にはどの方法で実装するのも良さそうです。 ぱっと対応するのによさそうなのは「2. 対象の要素の高さを100vhにする」だな〜と思うところです。 実装が適切だと判断するポイントは下記の通り。 初期表示で画面の高さと画像の高さが合うポートレートとランドスケープの切り