Now loading .....

rolling

スマホのアドレスバーの高さを調節する方法 | 東京・名古屋のwebフリーランスエンジニア 大林良平

ryohei obyashi

menu

TOP > ブログ > CSS > スマホのアドレスバーの高さを調節する方法

スマホのアドレスバーの高さを調節する方法

スマホのアドレスバーの高さを調節する方法

2020/02/09

たまにコーディングの案件で、ブラウザ縦横いっぱいに広げるwebサイトをお願いされた事があります。
方法としては2パターンが考えられます。

・HTML

 

・css(100%でやる方法)

・css(100vhでやる方法)

しかし、100vhでやる方法には落とし穴があります。それがスマホのアドレスバーの高さです。
フルスクリーンレイアウトは、ビューポートの高さの割合でスマホのアドレスバーも高さに含まれます。
それによりAndroid系やSafariのアドレスバーがある事にサイトのズレが生じます。

では100vhの時の高さの調節を解決する方法を1つご紹介します。

JavaScript (jQuery)で対応する。

.resizeメゾットと$(window).height();を使用して高さの値をとって、スマホのアドレスバーの分の高さをリサイズしてくれます。

 

最後に

コーダー、マークアップエンジニア、フロントエンドエンジニアさんは、パソコンで作業するためスマホで実機確認した際に『えぇ?』となる事が多いですが、スマホのアドレスバーの高さまで意識まで回らないと思います。
これを機会にスマホのアドレスバーの高さ意識してコーディングしてはいかがでしょうか?!

その他記事

blogに戻る一覧

webサイトの制作、webサービスの立ち上げ
webシステムの開発、アプリケーションの開発
是非、contactまでお問い合わせくださいませ