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