jQuery スマホのアドレスバーを除いた画面サイズを取得する方法
最終更新日 - 公開日 2018.03.23
by
jQuery でスマホのアドレスバーを除いた画面サイズを取得する方法を紹介します。
例えば、ファーストビューで全画面表示をしたい時に便利方法です。
また、最新のブラウザーで実装可能な CSS の新単位で指定する方法も紹介します。
アドレスバーを除いた画面サイズを取得する方法
ファーストビューを全画面表示にしたいことは多々あります。
簡単に実装するには、Width に100vw（または100%）、height に 100vh と指定すればいいのですが、この方法ではスマホのアドレスバーも含めたサイズになってまうため、アドレスバーぶん長くなってしまいます。
しかもアドレスバーの高さは iPhone や Android で異なるため、動的に値を取得する必要があります。
そこで jQuery でアドレスバーを除いた画面サイズを取得して、指定したクラスへ付与してあげます。
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); // アドレスバーを除いたサイズを付与
});
ウィンドウの高さを取得して指定したクラスへ付与してあげます。
パソコンなどで画面サイズを変更した時は、高さを再取得して付与します。
CSS の新しい単位 svh
各種ブラウザーのアップデートにより、単位 svh を使うことで、動的に高さを取得しないで画面いっぱいの指定をすることができるようになりました。
単位 svh を使った方法
指定は簡単です。ファーストビューを全画面で表示したい場合、height を 100svh と指定します。
.cover {
height: 100svh;
}
古いブラウザーに対応していない場合があるため、案件ごとの推奨環境を確認してご利用ください。
各種ブラウザーの対応状況を知りたい方はこちら。
まとめ
jQuery でスマホのアドレスバーを除いた画面サイズを取得する方法を紹介しました。
