检测视口方向，如果方向为纵向，则显示警报消息，告知用户指令

javascript jquery mobile viewport device-orientation

2022-08-30 00:51:44

我正在专门为移动设备建立一个网站。特别是有一个页面最适合在横向模式下查看。

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

因此，基本上，我希望站点检测视口方向，如果方向为纵向，则显示一条警报消息，告知用户最好在横向模式下查看此页面。

答案 1

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

jQuery Mobile 有一个事件来处理此属性的更改...如果要在以后有人旋转时发出警告 - 方向更改

另外，经过一些谷歌搜索，检查出来（我相信这是以度为单位测量的...）window.orientation

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

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

答案 2

您也可以使用，我使用并更喜欢它，因为它与CSS语法非常相似：window.matchMedia

if (window.matchMedia("(orientation: portrait)").matches) {
   // you're in PORTRAIT mode
}

if (window.matchMedia("(orientation: landscape)").matches) {
   // you're in LANDSCAPE mode
}

已在 iPad 2 上测试。