たまにコーディングの案件で、ブラウザ縦横いっぱいに広げるwebサイトをお願いされた事があります。
方法としては２パターンが考えられます。
・HTML
|
1 2 3 |
<section class="p-mainVisual"> <!-- 要素内 --> </section> |
・css(100%でやる方法)
|
1 2 3 4 5 6 7 |
html,body { height: 100%; } .p-mainVisual { height: 100%; } |
・css(100vhでやる方法)
|
1 2 3 |
.p-mainVisual { height: 100vh; } |
しかし、100vhでやる方法には落とし穴があります。それがスマホのアドレスバーの高さです。
フルスクリーンレイアウトは、ビューポートの高さの割合でスマホのアドレスバーも高さに含まれます。
それによりAndroid系やSafariのアドレスバーがある事にサイトのズレが生じます。
では100vhの時の高さの調節を解決する方法を１つご紹介します。
JavaScript (jQuery)で対応する。
|
1 2 3 4 5 6 7 8 9 |
// スマートフォンで全画面表示 $(document).ready(function () { var hSize = $(window).height(); $('.p-mainVisual').height(hSize); // アドレスバーを除いたサイズを付与 }); $(window).resize(function () { // ページをリサイズした時の処理 var hSize = $(window).height(); $('.p-mainVisual').height(hSize); // アドレスバーを除いたサイズを付与 }); |
.resizeメゾットと$(window).height();を使用して高さの値をとって、スマホのアドレスバーの分の高さをリサイズしてくれます。
最後に
コーダー、マークアップエンジニア、フロントエンドエンジニアさんは、パソコンで作業するためスマホで実機確認した際に『えぇ？』となる事が多いですが、スマホのアドレスバーの高さまで意識まで回らないと思います。
これを機会にスマホのアドレスバーの高さ意識してコーディングしてはいかがでしょうか？！
