jQuery スマホのアドレスバーを除いた画面サイズを取得する方法

最終更新日 2019.03.20 - 公開日 2018.03.23

by Takumi Hirashima

jQuery でスマホのアドレスバーを除いた画面サイズを取得する方法を紹介します。
例えば、ファーストビューで全画面表示をしたい時に便利方法です。

アドレスバーを除いた画面サイズを取得する方法

ファーストビューを全画面表示にしたいことは多々あります。
簡単に実装するには、Width や height に 100vh と指定すればいいのですが、
この方法だと、スマホではアドレスバーも含めたサイズになってしまい、高さが若干オーバーしてしまいます。
しかもアドレスバーの高さは iPhone や Android で異なるため、動的に値を取得する必要があります。
そこで jQuery でアドレスバーを除いた画面サイズを取得して、指定したクラスへ付与してあげます。

例えば、クラス .cover に対して、アドレスバーを除いた画面サイズを付与したいときは、次のコードを追加します。
まずは HTMML ファイルを含めた全部入りのコード。

<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="utf-8">

<title></title>

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

</head>

<body style="margin: 0;">

<div class="cover" style="background-color: #000;"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">

// スマートフォンで全画面表示

$(document).ready(function(){

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

  $('.cover').height(hSize); // アドレスバーを除いたサイズを付与

});

$(window).resize(function(){ // ページをリサイズした時の処理

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

  $('.cover').height(hSize); // アドレスバーを除いたサイズを付与

});

</script>

</body>

</html>

そして jQuery だけのコードはこちら。

// スマートフォンで全画面表示

$(document).ready(function(){

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

  $('.cover').height(hSize); // アドレスバーを除いたサイズを付与

});

$(window).resize(function(){ // ページをリサイズした時の処理

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

  $('.cover').height(hSize); // アドレスバーを除いたサイズを付与

});

ウィンドウの高さを取得して指定したクラスへ付与してあげます。
パソコンなどで画面サイズを変更した時は、高さを再取得して付与します。

まとめ

jQuery でスマホのアドレスバーを除いた画面サイズを取得する方法を紹介しました。