jQuery2018.03.23 update

jQuery スマートフォンで全画面表示する方法

by Takumi Hirashima

jQuery スマートフォンで全画面表示する方法を紹介します。
例えば、スマートフォンでサイトを見た時に、全画面で写真を表示したい時に便利方法です。

スマートフォンで全画面表示する方法

スマートフォンで全画面表示をする場合に、CSSの数値指定で単位を 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 スマートフォンで全画面表示する方法を紹介しました。

スマートフォンで全画面表示する方法

まとめ

合わせて読みたい関連記事