【jQuery】スマホのアドレスバーのせいで全画面表示がうまくいかない時の解決方法

100vhを使ってファーストビューを全画面表示にしようとしたのにスマホで確認した時、アドレスバーのせいで思った様な表示になっていなかったことはありませんか？なぜならスマホだと100vhをアドレスバーも含めたサイズで計算してしまうので、その分ズレてしまうんです。

今回は、jQueryでスマホのアドレスバーの高さを除いたサイズを取得して全画面表示する方法をお伝えします。

実装方法

以下のHTMLを用意します。

HTML

<div class="main-visual"></div>

jQuery

$(function () {
    var winHeight = $(window).height();
    $('.main-visual').height(winHeight);
});
$(window).resize(function () {
    var winHeight = $(window).height();
    $('.main-visual').height(winHeight);
});

jQueryの詳細

ではここからはjQueryの内容を1行ずつ説明していきます。

2行目

ウィンドウの高さを取得して、変数winHeightに代入します。

var winHeight = $(window).height();

3行目

「.main-visual」が付いた要素に、アドレスバーを除いたウィンドウの高さを与えます。

$('.main-visual').height(winHeight);

5行目

「ページをリサイズしたら以下の処理を実行する」という指定になります。

$(window).resize(function () {
    //　ここに処理内容を記述
});

まとめ

全画面表示にしたい時に100vhを使うのは本当に便利ですが、思わぬ落とし穴があるものですね。

少しの記述で、解決できるので是非活用してみてください。