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 スマートフォンで全画面表示する方法を紹介しました。
この記事をシェアする
合わせて読みたい関連記事
今日のバナー
