スクロールバーの幅を含むブラウザのサイズを取得するjQuery

更新日：2022年6月23日

ブラウザのサイズを取得するjQueryの記事に反響があって嬉しい管理人です。誰かの役に立っているんだなと思うと更新の意欲が高まります。皆様、ありがとうございます。
頂いた意見の中にCSSのメディアクエリの数値と誤差があるのは何故でしょうかというものがありましたので、それについてのアンサー記事になります。

CSSのメディアクエリの数値との誤差の原因はスクロールバーの幅が含まれているかどうかが鍵となります。ブラウザのサイズを取得するjQueryの記事のソースコードではスクロールバーの幅が含まれていないブラウザのサイズの取得となっているので、今回の記事ではスクロールバーの幅を含むブラウザのサイズ（横幅）が今何pxなのかを調べるjQueryのご紹介です。

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

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

HTMLの記述は全く前回の記事と同じですが、次のjQueryの記述が異なります。下記のソースコードを貼り付けます。

$(window).on('load resize',function() {
	var window_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
	$('.window_width_display').text(window_width);
});

ウインドウが読み込まれた時、もしくはウインドウの横幅が変更された時に、
ウインドウの幅をクラスwindow_width_displayに表示するという記述になりますが、スクロールバーの幅を含むよう改良されております。

これにて実装完了です！
お試しあれ！