👩💻
スマホのアドレスバーの高さを調節する方法
スマホのアドレスバーの高さを調節する方法
こんなご相談でありませんか?
たまにコーディングで、ブラウザ縦横いっぱいに広げるwebサイトをお願いされた事があります。
方法としては2パターンが考えられます。
実装したコード
sample.html
<section class="p-mainVisual">
<!-- 要素内 -->
</section>
sample.css
/* 100%でやる方法 */
html,body {
height: 100%;
}
.p-mainVisual {
height: 100%;
}
/* 100vhでやる方法 */
.p-mainVisual {
height: 100vh;
}
しかし、100vhでやる方法には落とし穴があります。それがスマホのアドレスバーの高さです。
フルスクリーンレイアウトは、ビューポートの高さの割合でスマホのアドレスバーも高さに含まれます。
それによりAndroid系やSafariのアドレスバーがある事にサイトのズレが生じます。
では100vhの時の高さの調節を解決する方法を1つご紹介します。
JavaScript (jQuery)で対応、実装したコード
sample.js
// スマートフォンで全画面表示
$(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();を使用して高さの値をとって、スマホのアドレスバーの分の高さをリサイズしてくれます。
まとめ
コーダー、マークアップエンジニア、フロントエンドエンジニアさんは、パソコンで作業するためスマホで実機確認した際に『えぇ?』となる事が多いですが、スマホのアドレスバーの高さまで意識まで回らないと思います。
これを機会にスマホのアドレスバーの高さ意識してコーディングしてはいかがでしょうか?!
Discussion