狼読

 
2020/05/16

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

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

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

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

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

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

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

今回は、サンプルとして表示しても空のdivタグが1つあるだけなので、サンプルの実装例は割愛させていただきます。
本当にこれだけでいいの?って思う方はいらっしゃるかと思いますのがこれでいいのです。こちらの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>

画面サイズを取得して数値として表示するサンプル実装例

※ブラウザを小さくしたり大きくしたりすると数値が変わります

上記の様に画面サイズの数値をhtmlに出力することができましたね。

まとめ

今回は、jqueryを使って画面サイズの数値を取得する方法についてご紹介させていただきました。この取得した画面サイズに応じてデザインを変えたり、jsの動きを決めたり、様々な挙動に使用することができる様になるかと思います。

あなたのサイトがより良いものになります様に。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

投稿カレンダー

2020年11月
 1
2345678
9101112131415
16171819202122
23242526272829
30  

Technology

category

©狼読