JavaScript滚动调整事件-移动设备

Question

我正在尝试为移动设备制作网站。我已经将“resize”事件绑定在窗口上，这应该在移动设备旋转（纵向<->横向）时重新排列元素。在iPhone和三星Galaxy SII上，当我向下滚动页面时会触发该事件，这并不好。

我该如何解决这个问题？

- gabitzish

---

请查看 https://dev59.com/fWox5IYBdhLWcg3w6oZf。 - caw

Answer 1

缓存浏览器窗口的宽度，当窗口大小改变时，如果宽度仍然相同，则返回false。

一个小的jQuery代码片段：

    var cachedWidth = $(window).width();
    $(window).resize(function(){
        var newWidth = $(window).width();
        if(newWidth !== cachedWidth){
            //DO RESIZE HERE
            cachedWidth = newWidth;
        }
    });

- sidonaldson

---

这就是我一直在寻找的答案。太好了。楼主说得对，这应该被采纳为正确答案。这是正确的方法。 - Luke Fixt

@LukeFlego 这是修复这个 bug 的最佳方式，虽然代码不太理想。有时候最简单的解决方案就是最好的 :) - sidonaldson

遇到了同样的问题，这个解决了。这是正确的答案。 - user3827326

这看起来像是jQuery，但问题中没有提到它...不过还是谢谢sidonaldson的回答 - 挺不错的。 - LGT

@LGT 正确。我会更新答案以澄清这一点。 - sidonaldson

对于所有想要jQuery免费答案的人，window.innerWidth。 - Arthur Weborg

Answer 2

使用onOrientationChange事件和window.orientation属性代替。另外请查看这个答案。这里是一个测试页面的链接。

- scessor