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 でスマホのアドレスバーを除いた画面サイズを取得する方法を紹介しました。
