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

时间:2014-12-19 07:19:10

标签: jquery

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

这是我的代码。

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

resize();
});

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

那么哪里出错了,解决方案是什么?

1 个答案:

答案 0 :(得分: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();  
    });
});