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

Question

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

这是我的代码。

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

resize();
});

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

那么问题出在哪里以及解决方案是什么？

Answer 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();  
    });
});