今更ではある。
どういうアレか。
画面いっぱい、要するに100vhで指定した要素の扱いがiPhoneのsafariだけ異なるっていう。画面上部のアドレスバーから画面端まで、つまり画面下部のバーで隠れてるところも含めて100vhになる。
だから、全画面のコンテンツの下部に「スクロール」みたいな表示を付けても隠れちゃう場合がある。
iPhoneはiframeの件もあるし、本当に好きになれないですね。
やる
ここの記事を丸パクリでいい。
![](https://blog.megefeps.info/wp-content/uploads/cocoon-resources/blog-card-cache/3abcb3b0d488a010d04d4536ee2ae20c.jpg)
【CSS】高さ100vh指定時のスマホステータスバーを除く方法
SP(スマートフォン)でメインヴィジュアルを画面いっぱいにしたいけどステータスバー分高さがずれてしまう。。 こ…
jsで特定要素の高さを調整するってやつなので、とりあえずぶっこめばOKってことじゃない点に注意。
ソース内の「.mainvisual」は対象になる要素のclassなりidに置き換える。
逆に全画面用のclassを作って汎用性をもたせてもいいかもしれないけど、まあそれは組み方次第ですね。
コメント