Chrome移动滚动触发resize事件答案

【问题标题】：Chrome mobile scroll triggering resize eventChrome移动滚动触发resize事件
【发布时间】：2015-02-09 13:33:48
【问题描述】：

当我在 Chrome 移动设备中查看我的网站时，jQuery 调整大小事件会在滚动时触发。据我所知，触发它的是滚动时高度的变化。我的事件应该只在宽度改变时触发，而不是高度......

    $(window).resize(function() {
      if ($(window).width() < 688) {
            $('nav ul').css('display', 'none');
            $('nav p').removeClass('active');
      }

     else {
        $('nav ul').css('display', 'inherit');
     }
    });

我能找到的唯一相关答案是mobile chrome fires resize event on scroll。

提到了 onOrientationChange，但这不是我需要的，因为它不是基于设备方向，而是基于 688px 宽度以下的任何宽度。

另外提到的是：

var width = $(window).width(), height = $(window).height();

然后在你的 resize 事件处理程序中你可以做。

if($(window).width() != width && $(window).height() != height){
//Do something
}

这看起来像是我需要的东西，但我对 jQuery 的理解还不够深入，无法知道如何更改它来满足我的需要。

有什么想法吗？

【问题讨论】：

标签： jquery google-chrome mobile

【解决方案1】：

也许可以这样做：

var saveWindowWidth = true;
    var savedWindowWidth;

//set the initial window width
    if (saveWindowWidth = true){
        savedWindowWidth = windowWidth;
        saveWindowWidth = false;
    }


//then on resize...


$(window).resize(function() {

//if the screen has resized then the window width variable will update
        windowWidth = window.innerWidth;


//if the saved window width is still equal to the current window width do nothing
        if (savedWindowWidth == windowWidth){
            return;
        }


//if saved window width not equal to the current window width do something
        if(savedWindowWidth != windowWidth) {
           // do something

            savedWindowWidth = windowWidth;
        }

    });

【讨论】：