jQuery ブラウザの横幅を条件に処理を変える方法

レスポンシブデザインのサイトやブラウザの横幅を条件に何らかの処理を変えたい場合に利用できます。

サンプル

このサンプルはブラウザの横幅が660px以下かどうかを分岐点に div#content の width を変更する処理をしています。

$(window).on('load resize', function(){
    var w = $(window).width();
    var x = 660;
    if (w <= x) {
        $('#content').css({
            width: '100%'
            
        });
        console.log("660px 以下：SPなど");
    } else {
        jQuery('#content').css({
            width: '660px'
            
        });
        console.log("PC");
    }
});

WordPressで上手く動作しない場合

WordPressのテーマなどに記述してうまく動かない場合は「$」を「jQuery」に変更します。

jQuery(window).on('load resize', function(){
    var w = jQuery(window).width();
    var x = 660;
    if (w <= x) {
        jQuery('#content').css({
            width: '100%'
            
        });
        console.log("660px 以下：SPなど");
    } else {
        jQuery('#content').css({
            width: '660px'
            
        });
        console.log("PC");
    }
});