スマホの全画面サイズについて
トップビューに全画面サイズのヒーローを置きたいと思ってます。最近のブラウザはファーストビューでアドレスバーが出て、下にスクロールすると消えるというのが普通のようですが、100vh だとアドレスバーを省いたサイズになるようで、そのためアドレスバーが表示されてると、画面下部の要素が見えなくなるという現象が起きます。
そこで画面サイズからアドレスバーを省いたサイズを取得したいんですが、
・アドレスバーの挙動はみんなその仕様なのか
・アドレスバーの高さは統一されているのか
という問題があります。これって皆さんどうされてますでしょうか。
3 件の回答
デバイスやブラウザによって100vhは仕様が変わるから、スマホにおいては100vhでの全画面実装はやめた方がいい。vwの方は基本問題ないけど。
全画面をしようとするならhtmlタグ及びbodyタグにheight100%設定の上で実装。全画面したい要素もheight100%にして実装。
ネイティブjsではかる
Re:2
遅くなりました。確かにこのやり方だとアドレスバーを省いたサイズになりますね。ありがとうございました。