检测视口方向，如果方向是纵向显示警告消息，通知用户说明 [英] Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions

问题描述

我正在构建一个专门针对移动设备的网站.特别是有一页最好在横向模式下查看.

I am building a website specifically for mobile devices. There is one page in particular which is best viewed in landscape mode.

有没有办法检测访问该页面的用户是否在纵向模式下查看它，如果是，则显示一条消息，通知用户该页面最好在横向模式下查看?如果用户已经以横向模式查看它，则不会出现任何消​​息.

Is there a way to detect if the user visiting that page is viewing it in Portrait mode and if so, display a message informing the user that the page is best viewed in landscape mode? If the user is already viewing it in landscape mode then no message will appear.

所以基本上，我希望网站检测视口方向，如果方向是纵向，然后显示一条警告消息，通知用户最好在横向中查看此页面> 模式.

So basically, I want the site to detect the viewport orientation, if orientation is Portrait, then display an alert message advising the user that this page is best viewed in Landscape mode.

推荐答案

if(window.innerHeight > window.innerWidth){
    alert("Please use Landscape!");
}

jQuery Mobile 有一个处理此属性更改的事件...如果您想在稍后有人轮换时发出警告 - orientationchange

jQuery Mobile has an event that handles the change of this property... if you want to warn if someone rotates later - orientationchange

此外，在谷歌搜索之后，查看 window.orientation(我相信这是以度数来衡量的......)

Also, after some googling, check out window.orientation (which is I believe measured in degrees...)

EDIT:在移动设备上，如果您打开键盘，则上述操作可能会失败，因此可以使用 screen.availHeight 和 screen.availWidth>，即使在键盘打开后也能提供适当的高度和宽度.

EDIT: On mobile devices, if you open a keyboard then the above may fail, so can use screen.availHeight and screen.availWidth, which gives proper height and width even after the keyboard is opened.

if(screen.availHeight > screen.availWidth){
    alert("Please use Landscape!");
}

这篇关于检测视口方向，如果方向是纵向显示警告消息，通知用户说明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！