我正在为移动设备建立一个网站。有一页特别适合在横屏模式下浏览。
是否有一种方法来检测访问该页面的用户是否在纵向模式下查看它，如果是的话，显示一条消息通知用户该页面在横向模式下查看最好?如果用户已经在横屏模式下查看，则不会出现任何消息。
所以基本上，我想让网站检测视口的方向，如果方向是纵向，然后显示一个警告消息，建议用户这个页面最好在横向模式下查看。
当前回答
经过一些实验，我发现旋转一个方向感知设备总是会触发浏览器窗口的调整大小事件。因此，在你的resize处理程序中，简单地调用这样一个函数:
function is_landscape() {
return (window.innerWidth > window.innerHeight);
}
其他回答
你可以使用CSS3:
@media screen and (orientation:landscape)
{
body
{
background: red;
}
}
我把两个解决方案结合起来，对我来说效果很好。
window.addEventListener("orientationchange", function() {
if (window.matchMedia("(orientation: portrait)").matches) {
alert("PORTRAIT")
}
if (window.matchMedia("(orientation: landscape)").matches) {
alert("LANSCAPE")
}
}, false);
在iOS设备上，JavaScript中的window对象有一个orientation属性，可以用来确定设备的旋转。下面显示了值窗口。面向iOS设备(如iPhone, iPad, iPod)在不同方向。
这个解决方案也适用于android设备。我检查了android原生浏览器(互联网浏览器)和Chrome浏览器，甚至是旧版本的浏览器。
function readDeviceOrientation() {
if (Math.abs(window.orientation) === 90) {
// Landscape
} else {
// Portrait
}
}
有些设备不提供orientationchange事件，但会触发窗口的resize事件:
// Listen for resize changes
window.addEventListener("resize", function() {
// Get screen size (inner/outerWidth, inner/outerHeight)
}, false);
没有orientationchange事件那么明显，但是工作得很好。请在这里查看
经过一些实验，我发现旋转一个方向感知设备总是会触发浏览器窗口的调整大小事件。因此，在你的resize处理程序中，简单地调用这样一个函数:
function is_landscape() {
return (window.innerWidth > window.innerHeight);
}
