[js]jqueryを使って画面サイズを取得する方法

今回は、jqueryを使って画面サイズを取得する方法についてご紹介したいと思います。画面サイズを取得して何が嬉しいの？って思う方もいらっしゃいますよね。例えば画面サイズに応じて、js側からcssを変更したり文章を書き換えたり、動きを変えたりと様々な場面に使われております。

今回は、基礎知識として、画面サイズをどうやって取得するのかという方法を簡単にご紹介したいと思います。
今回ご紹介するサンプルでは、画面サイズをテキストとしてブラウザを小さくしたり大きくしたりした時に数値として表示させるものを目指します。

テキストを表示させるためのhtmlを用意しましょう

まずは、画面サイズを表示させるためのhtmlを用意しましょう。
こういったもののdivタグを１つ記述するだけです。

今回のサンプルでは、js側で用意したhtmlの部分の文字を書き換えていきますので、divタグにクラスを１つつけただけのhtmlを用意します。

<div class="window_size"></div>

今回は、サンプルとして表示しても空のdivタグが１つあるだけなので、サンプルの実装例は割愛させていただきます。
本当にこれだけでいいの？って思う方はいらっしゃるかと思いますのがこれでいいのです。こちらのdivタグの文字をjsで画面サイズの数値にすることがこのdivタグの役割となります。

jqueryを使って画面サイズを取得し出力してみましょう

画面サイズを取得するための、javascriptを記述していこうと思います。
今回の事例では、画面のサイズが変わった時にも、jsが起動してウィンドウサイズの数値を変えないといけませんので、以下の様に loadした時と、画面をresizeした時に起動する様にしましょう。画面サイズを取得するために$(window).width();と記述します。そこで得た数値を先ほど作ったhtmlのクラスのテキスト文字を変更することで出力する様にしましょう。

上記をコード化したものが下記になります。

<script>
 $(window).on('load resize',function(){
   var w_width=$(window).width();
   $('.window_size').text("現在のウィンドウサイズは、"+w_width+"です。");
 });
</script>
<div class="window_size"></div>