我正在为移动设备建立一个网站。有一页特别适合在横屏模式下浏览。
是否有一种方法来检测访问该页面的用户是否在纵向模式下查看它，如果是的话，显示一条消息通知用户该页面在横向模式下查看最好?如果用户已经在横屏模式下查看，则不会出现任何消息。
所以基本上，我想让网站检测视口的方向，如果方向是纵向，然后显示一个警告消息，建议用户这个页面最好在横向模式下查看。
当前回答
另一种基于宽度/高度的比较来确定方向的方法:
var mql = window.matchMedia("(min-aspect-ratio: 4/3)");
if (mql.matches) {
orientation = 'landscape';
}
你在"resize"事件上使用它:
window.addEventListener("resize", function() { ... });
其他回答
//see also http://stackoverflow.com/questions/641857/javascript-window-resize-event
//see also http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
/*
Be wary of this:
While you can just hook up to the standard window resize event, you'll find that in IE, the event is fired once for every X and once for every Y axis movement, resulting in a ton of events being fired which might have a performance impact on your site if rendering is an intensive task.
*/
//setup
window.onresize = function(event) {
window_resize(event);
}
//timeout wrapper points with doResizeCode as callback
function window_resize(e) {
window.clearTimeout(resizeTimeoutId);
resizeTimeoutId = window.setTimeout('doResizeCode();', 10);
}
//wrapper for height/width check
function doResizeCode() {
if(window.innerHeight > window.innerWidth){
alert("Please view in landscape");
}
}
这就是我用的。
function getOrientation() {
// if window.orientation is available...
if( window.orientation && typeof window.orientation === 'number' ) {
// ... and if the absolute value of orientation is 90...
if( Math.abs( window.orientation ) == 90 ) {
// ... then it's landscape
return 'landscape';
} else {
// ... otherwise it's portrait
return 'portrait';
}
} else {
return false; // window.orientation not available
}
}
实现
window.addEventListener("orientationchange", function() {
// if orientation is landscape...
if( getOrientation() === 'landscape' ) {
// ...do your thing
}
}, false);
经过一些实验，我发现旋转一个方向感知设备总是会触发浏览器窗口的调整大小事件。因此，在你的resize处理程序中，简单地调用这样一个函数:
function is_landscape() {
return (window.innerWidth > window.innerHeight);
}
我认为更稳定的解决方案是使用屏幕而不是窗口，因为如果你要调整桌面电脑上的浏览器窗口大小，它可以是横向或纵向的。
if (screen.height > screen.width){
alert("Please use Landscape!");
}
获得方向(在任何时间在你的js代码)通过
window.orientation
当窗口。方向返回0或180则处于竖屏模式，返回90或270则处于横屏模式。
