当屏幕方向改变时如何重新加载网页？

Question

当屏幕方向改变时如何重新加载网页？

15

我想使用jQuery mobile触发一个事件，在设备旋转时自动重新加载页面。我使用了带有max-device-width，orientation:landscape和orientation: portrait的媒体查询。由于<video>无法正确缩放...我唯一能想到的解决办法是在设备旋转时刷新页面以正确显示媒体查询。

我该怎么做？谢谢。

- David Berning

你有研究过 onorientationchange 事件吗？ - oomlaut

@oomlaut 一点点。 - David Berning

@Ross，它不起作用。只需将您的代码粘贴到正确链接jQuery移动的<head>标记中的<script>标记中即可？这种事件可能吗？ - David Berning

@DavidBerning 你有检查 orientationchange 事件是否触发吗？可以在其中放置 alert 或 console.log 来查看它是否触发。你使用的 jQM 版本是什么？你可以尝试使用 $(window).bind('orientationchange', function(e) {} ); 而不是使用 on。 - Ross

5个回答

10

这个怎么样？

$(window).on('orientationchange', function(e) {
     $.mobile.changePage(window.location.href, {
        allowSamePageTransition: true,
        transition: 'none',
        reloadPage: true
    });
});

最好将orientationchange事件的命名空间限定在特定页面。

jQM关于orientationchange事件的文档

- Ross

2

使用jQuery

$(window).bind('orientationchange', function (event) {
    location.reload(true);
});

- Shawn

这很简单。谢谢！ - vijayraj34

2

请尝试以下代码，在方向事件上重定向页面，这对我很有效。

if (window.DeviceOrientationEvent) {
    window.addEventListener('orientationchange', function() { location.reload(); }, false);
}

谢谢

- subindas pm

1

<script type="text/javascript">
window.addEventListener("orientationchange", function() {
        console.log(screen.orientation);
}, false);
</script>

- logesh kumar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Berning · Accepted Answer

谢谢回答的人，但我找到了这个并使用它，它完美地起作用了。

<script type="text/javascript"> // RELOADS WEBPAGE WHEN MOBILE ORIENTATION CHANGES  
    window.onorientationchange = function() { 
        var orientation = window.orientation; 
            switch(orientation) { 
                case 0:
                case 90:
                case -90: window.location.reload(); 
                break; } 
    };