【jQuery】resize()を使ってリアルタイムで現在のウィンドウサイズを取得

今回は実務でよく使用するjQueryの.resize( )を使ったリアルタイムで現在のウィンドウサイズを取得する方法を紹介します。
resizeイベントを使えばページ更新をしなくても、ウィンドウサイズを変更した時点で処理が可能でリキッドレイアウト時に活躍します。
レスポンシブウェブデザインの案件では非常に便利ですが、状況によってはページが重くなるので要注意です。

resizeイベントの実装例

>> DEMOはこちらから！（PCでのみで確認できます）

$(window).resize(function(){
    var w = $(window).width();
    var x = 500;
    if (w >= x) {
        $('.text').css({
            'font-size' : '72px'
        });
    } else {
        $('.text').css({
            'font-size' : '12px'
        });
    }
});

デモページでは上記のスクリプトにより
ウィンドウサイズが500px以上だとフォントサイズが72px
ウィンドウサイズが500px以下だとフォントサイズが12px
となるように処理されます。

また、レスポンシブウェブデザインなのにスマートフォン閲覧時のみ下層ページへのリンクがあり、その下層ページでディスプレイサイズをPCサイズまで広げた瞬間にTOPページへ飛ばすという謎仕様を受けた時も活用しました。

参考にさせていただいた記事
http://bl6.jp/web/javascript/change-process-get-window-size/

この記事を書いた人（著者情報）

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。