窗口事件上的 jQuery 函数（加载和调整大小）

我不确定如何使用 jQuery 上窗口事件加载和调整大小的顺序，使其在调整大小时正常工作。第一个函数用于获取除滚动条宽度之外的总宽度，因为CSS使用的是设备宽度，而JS使用的是文档宽度。

当总屏幕宽度在 768px 到 1024px 之间时，第二个函数添加了一个样式，当我在任何屏幕上加载页面、调整大小等后，它应该可以工作。我做了很多测试，我认为问题在于窗口事件顺序。

为了更具体地说明问题，它不会删除样式当我以 900 像素加载页面并将其扩展至 > 1024 像素时！或者相反，当我以 1300px 加载页面并将宽度缩短到 900px 时，它不会添加样式。

我认为这是加载和调整事件顺序的原因，但我不完全确定。或者也许我没有在调整大小时正确声明变量。

代码：

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };

}

$(document).ready(function(){        
    var vpwidth=$(window).width();    

        $(window).on('resize', function(){            
            var changeWidth = (($('.main-content .wrap').width() * 96.3)/100) - 312;

                if(vpwidth >= 768 && vpwidth <= 1024) {
                    $('.contentleft, .contentright').css('width', changeWidth + 'px');
                } else {
                    $('.contentleft, .contentright').removeAttr('style');
                }

        }).resize();

});

我相信问题是你没有重新计算vpwidth在调整大小时，因此每次调整窗口大小时都会使用加载页面时获得的值。

try

$(document).ready(function(){            

    $(window).on('resize', function(){ 
       var vpwidth=$(window).width(); // get the new value after resize
       var changeWidth = (($('.main-content .wrap').width() * 96.3)/100) - 312;

       if(vpwidth >= 768 && vpwidth <= 1024) {
           $('.contentleft, .contentright').css('width', changeWidth + 'px');
        } else {
            $('.contentleft, .contentright').removeAttr('style');
        }

    }).resize();

});