[js]iPhoneブラウザのアドレスバーを考慮した全画面指定

今更ではある。

どういうアレか。

画面いっぱい、要するに100vhで指定した要素の扱いがiPhoneのsafariだけ異なるっていう。画面上部のアドレスバーから画面端まで、つまり画面下部のバーで隠れてるところも含めて100vhになる。

だから、全画面のコンテンツの下部に「スクロール」みたいな表示を付けても隠れちゃう場合がある。

iPhoneはiframeの件もあるし、本当に好きになれないですね。

やる

ここの記事を丸パクリでいい。

【CSS】高さ100vh指定時のスマホステータスバーを除く方法 | kasumiblog
SP(スマートフォン)でメインヴィジュアルを画面いっぱいにしたいけどステータスバー分高さがずれてしまう。。 このような疑問に答えます! CSSで高さをファーストビュー全面にだすにはheightに100vhを指定すれば可能です。但しスマホの場合だとステータスバー分ズレて表示されてしまいます。 本記事ではJSを使い、ステー...

jsで特定要素の高さを調整するってやつなので、とりあえずぶっこめばOKってことじゃない点に注意。

ソース内の「.mainvisual」は対象になる要素のclassなりidに置き換える。
逆に全画面用のclassを作って汎用性をもたせてもいいかもしれないけど、まあそれは組み方次第ですね。

コメント

タイトルとURLをコピーしました