あなたのキモチ つなげるカタチ

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

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

スポンサーリンク

この記事は2016年3月8日に公開した記事です。

現在とは状況が違う場合がありますのでご注意ください。

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

resizeイベントの実装例

$(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/

スポンサーリンク