jquery,当窗口宽度更改时添加/删除类

<script type="text/javascript">
 $(document).ready( function() {
    /* check width on page load*/
    if ( $(window).width() < 514) {
     $('html').addClass('mobile');
    }
    else {}
 });

 $(window).resize(function() {
    /*If browser resized,check width again */
    if ($(window).width() < 514) {
     $('html').addClass('mobile');
    }
    else {$('html').removeClass('mobile');}
 });

嗯,我知道我晚了,但是我看到一些不是真正需要的东西,如$(document).ready().

尝试缓存您的选择器,如果你一遍又一遍地打电话,一个var var $window = $(window);这将有助于表现.我使用一个函数表达式来封装我远离全局范围,但仍然可以访问我的$window和$html缓存的jQuery选择的元素.

(function($) {
    var $window = $(window),$html = $('html');

    $window.resize(function resize(){
        if ($window.width() < 514) {
            return $html.addClass('mobile');
        }

        $html.removeClass('mobile');
    }).trigger('resize');
})(jQuery);

http://jsfiddle.net/userdude/rzdGJ/1

可能有点清洁,更容易遵循：

(function($) {
    var $window = $(window),$html = $('html');

    function resize() {
        if ($window.width() < 514) {
            return $html.addClass('mobile');
        }

        $html.removeClass('mobile');
    }

    $window
        .resize(resizE)
        .trigger('resize');
})(jQuery);

http://jsfiddle.net/userdude/rzdGJ/2