检测视口方向，如果方向是纵向显示警告消息，建议用户使用说明

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!");
}

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