【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/