当用户将移动设备变为横向时如何刷新网页

Posted 2023-03-14

【中文标题】当用户将移动设备变为横向时如何刷新网页

【英文标题】：How to do Refresh a web page when user turns mobile to landscape

【发布时间】：2012-01-13 09:46:35

【问题描述】：

我正在为 android 和 iPhone 做一个 web 应用程序。我的问题是，当用户转到横向时，我想刷新网页。由于我是 javascript 的初学者，我不知道该怎么做。请帮帮我

【问题讨论】：

存在这样的问题和答案 ;) ***.com/questions/850472/…

请关闭此问题以避免重复

【参考方案1】：

你可以使用orientationchange jQuery Mobile 事件然后做一个

window.location.reload(); 

刷新页面。

例如：

$(function()

// Set Inital orientation
// get the initial orientation from window which
// returns 0 for portrait and 1 for landscape
if(window.orientation == 0)
    var ori = "portrait";
else
    var ori = "landscape";

changeOrientation(ori);

// Orientation Change
// When orientation changes event is triggered
// exposing an orientation property of either
// landscape or portrait
$('body').bind('orientationchange',function(event)
    changeOrientation(event.orientation)
)

// Change the style dependengt on orientation
function changeOrientation(ori)
    // Remove all classes separated by spaces
    $("#orientation").removeClass('portrait landscape');
    $("#orientation").addClass(ori);
    $("#orientation").html("<p>"+ori.toUpperCase()+"</p>");


);

【讨论】：

我用过你的代码，还是不行 ""

@yuzi 我已经更新了我的代码，但我建议你看看 jquery 和 jquery mobile（这个例子正在使用）

最后我这样做了，然后它起作用了“ window.onorientationchange = function() var orientation = window.orientation; switch(orientation) case 0: window.location.reload(); break ; case 90: window.location.reload(); break; case -90: window.location.reload(); break; " 感谢 Johan

【参考方案2】：

您可以使用计时器并定期检查：

if (window.innerHeight > window.innerWidth) 
    // Redirect code, window.location...

【讨论】：

如果高度 > 宽度，手机将处于纵向模式，而不是横向模式