我正在为移动设备建立一个网站。有一页特别适合在横屏模式下浏览。
是否有一种方法来检测访问该页面的用户是否在纵向模式下查看它，如果是的话，显示一条消息通知用户该页面在横向模式下查看最好?如果用户已经在横屏模式下查看，则不会出现任何消息。
所以基本上，我想让网站检测视口的方向，如果方向是纵向，然后显示一个警告消息，建议用户这个页面最好在横向模式下查看。
当前回答
为了将所有这些伟大的注释应用到我的日常编码中，为了所有应用程序之间的连续性，我决定在我的jquery和jquery移动代码中使用以下内容。
window.onresize = function (event) {
applyOrientation();
}
function applyOrientation() {
if (window.innerHeight > window.innerWidth) {
alert("You are now in portrait");
} else {
alert("You are now in landscape");
}
}
其他回答
$(window).on("orientationchange",function( event ){
alert(screen.orientation.type)
});
或者你可以用这个…
window.addEventListener("orientationchange", function() {
if (window.orientation == "90" || window.orientation == "-90") {
//Do stuff
}
}, false);
//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");
}
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rotation Test</title>
<link type="text/css" href="css/style.css" rel="stylesheet"></style>
<script src="js/jquery-1.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEventListener("resize", function() {
// Get screen size (inner/outerWidth, inner/outerHeight)
var height = $(window).height();
var width = $(window).width();
if(width>height) {
// Landscape
$("#mode").text("LANDSCAPE");
} else {
// Portrait
$("#mode").text("PORTRAIT");
}
}, false);
</script>
</head>
<body onorientationchange="updateOrientation();">
<div id="mode">LANDSCAPE</div>
</body>
</html>
经过一些实验，我发现旋转一个方向感知设备总是会触发浏览器窗口的调整大小事件。因此，在你的resize处理程序中，简单地调用这样一个函数:
function is_landscape() {
return (window.innerWidth > window.innerHeight);
}
