【JS】ブラウザの横幅をjQueryで動的に取得・表示する方法

レスポンシブなデザインのサイトを作っていた際、あるブロックをブラウザの横幅により表示/非表示（display:none）する必要が出てきました。
その際に使用した、jQueryで動的に横幅を取得する方法です。

ブラウザ幅を動的に取得するスクリプト

デモ

px

↑ ブラウザ幅を変更すると、動的に数値が変わります

使用例

以下は、ブラウザ幅が799px以下の場合は #box というブロックに hideクラスを付与し非表示にし、800px以上の時は、hideクラスを削除するという例です。

各種コード

[js]

[/js]

jQueryでは、ブラウザの横幅は $(window).width(); で取得できますが、リロードのあとなど、1回しか動きません。
動的に取りたい場合は resize() を使用する事で取得が可能となります。

ということで、ルーチンを２段構えにする必要があるので、上記のような形となっています。

13行目の checkWidth(); をコールすることにより、読み込んだ時の処理を走らせ、横幅が変更された場合に作動する resize() により変更された瞬間の横幅を取得し、処理しています。

レスポンシブなサイトを作成の際に使えるルーチンではないでしょうか。

外部ファイル化

複数のhtmlヘッダにスクリプトを全てを書くってのが面倒になるので、外部ファイル化してみました。
読み込みのhtmlは必要かつ、内容はほぼほぼ同じですが。。。

[js]
function tgBrowserWidth()
{
var checkWidth = function() {
var browserWidth = $(window).width();
$("span#wid").text(browserWidth);
};

$(function(){
checkWidth();
$(window).resize(checkWidth);
});
}
[/js]

↑ 上記内容を jquery.tgBrowserWidth.js として外部ファイル化。文字コードはUTF-8を推奨。

[html]


[/html]

↑ 任意のパスに設置し、htmlヘッダで読み込みます。

[html]

[/html]

↑ htmlの任意の箇所に spanタグ を記述してください。そこにピクセル数を出力します。
本文コンテンツへ出力したくない場合は、スクリプトの console.log() のコメントアウトを外し、Firebug等で確認すると幸せになれそうです。

デモ

デモはこちらから。

-Javascript,jQuery
-ピクセル, ブラウザ横幅, レスポンシブ, 動的, 横幅, 横幅取得