jquery $(window).resize 事件在移动向上或向下滚动时触发

Posted 2023-03-14

【中文标题】jquery $(window).resize 事件在移动向上或向下滚动时触发

【英文标题】：jquery $(window).resize event getting fired in mobile scroll up or down

【发布时间】：2014-12-19 07:19:10

【问题描述】：

我正在使用带有 location.reload 方法的 jquery window.resize 函数，因为我想在移动用户从纵向更改为横向时重新加载我的页面，并且它在我的桌面浏览器中工作得很好，而我改变了我的窗口大小但是当我得到它时在移动设备中，每次我在移动设备中向上或向下滚动时都会触发我的 window.resize 事件。我不知道为什么它应该发生在滚动事件上，而它应该只发生在纵向和横向上。

这是我的代码。

$(document).ready(function () 
function resize() 
    alert("Hello")

resize();
);

$(window).resize(function() 
    location.reload();      
); 

那么问题出在哪里，解决办法是什么？

【问题讨论】：

请发布一个带有工作示例的 jsFiddle。此外，您的代码至少缺少一个右大括号。

我尝试在 android 上使用 chrome，并且滚动时的 resize 事件仅在地址栏恰好出现或消失时触发，这是正确的，因为可见页面实际上会调整大小。如果我可以提出一些建议，在调整大小事件中重新加载页面并不是一个好主意。

如果您尝试基于更改纵向横向重新加载，则需要检查方向更改。试试这个答案：***.com/questions/850472/…

【参考方案1】：

使用 window.onorientationchanged 事件来检测方向的变化并避免此问题。这是在移动设备上使用 onresized 事件的常见问题。每当菜单栏或键盘显示 1 个像素时，它都会触发此事件。如果您还需要获取方向，请使用 window.orientation。看看这个帖子：How do I detect when the iPhone goes into landscape mode via javascript? Is there an event for this?

window.orientation 默认返回 0，或 -90,90,180 表示从默认顺时针旋转多少度。通常，0 和 180 是纵向，-90 和 90 是横向，但这可能因设备而异。 查看此链接了解更多信息：http://davidwalsh.name/orientation-change

例子：

$(document).ready(function () 
    $( window ).on( "orientationchange", function( event ) 
        location.reload();  
    );
);