我正在为移动设备建立一个网站。有一页特别适合在横屏模式下浏览。
是否有一种方法来检测访问该页面的用户是否在纵向模式下查看它，如果是的话，显示一条消息通知用户该页面在横向模式下查看最好?如果用户已经在横屏模式下查看，则不会出现任何消息。
所以基本上，我想让网站检测视口的方向，如果方向是纵向，然后显示一个警告消息，建议用户这个页面最好在横向模式下查看。
当前回答
不要尝试固定窗口。方向查询(0,90等并不意味着纵向，横向等):
http://www.matthewgifford.com/blog/2011/12/22/a-misconception-about-window-orientation/
即使在iOS7上，0也不总是竖屏的，这取决于你进入浏览器的方式
其他回答
你可以使用CSS3:
@media screen and (orientation:landscape)
{
body
{
background: red;
}
}
或者你可以用这个…
window.addEventListener("orientationchange", function() {
if (window.orientation == "90" || window.orientation == "-90") {
//Do stuff
}
}, false);
经过一些实验，我发现旋转一个方向感知设备总是会触发浏览器窗口的调整大小事件。因此，在你的resize处理程序中，简单地调用这样一个函数:
function is_landscape() {
return (window.innerWidth > window.innerHeight);
}
下面是我根据David Walsh的文章(检测移动设备的方向变化)找到的最好的方法。
if ( window.matchMedia("(orientation: portrait)").matches ) {
alert("Please use Landscape!")
}
解释:
match media()是一个本地方法，允许您定义媒体查询规则并在任何时间点检查其有效性。
我发现在这个方法的返回值上附加一个onchange侦听器很有用。例子:
var mediaQueryRule = window.matchMedia("(orientation: portrait)")
mediaQueryRule.onchange = function(){ alert("screen orientation changed") }
我认为更稳定的解决方案是使用屏幕而不是窗口，因为如果你要调整桌面电脑上的浏览器窗口大小，它可以是横向或纵向的。
if (screen.height > screen.width){
alert("Please use Landscape!");
}
