-
1:ID:7maIga · 2019-12-09

スマホの全画面サイズについて

トップビューに全画面サイズのヒーローを置きたいと思ってます。最近のブラウザはファーストビューでアドレスバーが出て、下にスクロールすると消えるというのが普通のようですが、100vh だとアドレスバーを省いたサイズになるようで、そのためアドレスバーが表示されてると、画面下部の要素が見えなくなるという現象が起きます。

そこで画面サイズからアドレスバーを省いたサイズを取得したいんですが、
・アドレスバーの挙動はみんなその仕様なのか
・アドレスバーの高さは統一されているのか
という問題があります。これって皆さんどうされてますでしょうか。

3 件の回答

2:ID:P0/FwV · 2019-12-09

デバイスやブラウザによって100vhは仕様が変わるから、スマホにおいては100vhでの全画面実装はやめた方がいい。vwの方は基本問題ないけど。
全画面をしようとするならhtmlタグ及びbodyタグにheight100%設定の上で実装。全画面したい要素もheight100%にして実装。

3:ID:nnaDq. · 2019-12-09

ネイティブjsではかる

4:ID: · 2019-12-13

Re:2
遅くなりました。確かにこのやり方だとアドレスバーを省いたサイズになりますね。ありがとうございました。

コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る