ブラウザのサイズを取得するjQuery

更新日：2022年1月12日

今回の記事はブラウザのサイズ（横幅）が今何pxなのかを調べるjQueryのご紹介です。
レスポンシブWebデザインでWebサイトを作成したい時、何pxにブレイクポイントを設定するかといった時に役立ちます。

まずはhtmlソースコードの設置です。下記のソースコードをコピペして貼り付けます。

window_width_displayというクラス名のついた空のpタグです。
ここにブラウザのサイズが表示されます。
bodyタグ内であればどこに設置してもOKです。

次にjQueryの記述です。下記のソースコードを貼り付けます。

$(window).on('load resize',function() {
	var window_width = $(window).width();
	$('.window_width_display').text(window_width);
});

ウインドウが読み込まれた時、もしくはウインドウの横幅が変更された時に、
ウインドウの幅をクラスwindow_width_displayに表示するという記述です。

これにて完成！
いかがでしょうか。簡単に実装出来ますので、お試し下さい。