Javascript 使用javascript检测方向的变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5498934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect change in orientation using javascript
提问by manraj82
Is it possible to detect change in orientation of the browser on the iPad or Galaxy Tab using javascript? I think it's possible using css media queries.
是否可以使用 javascript 检测 iPad 或 Galaxy Tab 上浏览器方向的变化？我认为可以使用 css 媒体查询。
回答by mplungjan
UPDATE:
更新：
You might want to check out
你可能想看看
jQuery mobile orientationchange
or the plain JS one:
或普通的 JS 之一：
window.addEventListener("orientationchange", function() {
alert(window.orientation);
}, false);
window.addEventListener("orientationchange", function() {
alert("the orientation of the device is now " + screen.orientation.angle);
});
Older answer
较旧的答案
http://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips/
http://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips/
Safari on the iPad does support the window.orientation property, so if necessary, you can use that to determine if the user is in horizontal or vertical mode. As reminder of this functionality:
iPad 上的 Safari 确实支持 window.orientation 属性，因此如有必要，您可以使用它来确定用户是处于水平模式还是垂直模式。作为此功能的提醒：
window.orientation is 0 when being held vertically
window.orientation is 90 when rotated 90 degrees to the left (horizontal)
window.orientation is -90 when rotated 90 degrees to the right (horizontal)
There is also the orientationchange event that fires on the window object when the device is rotated.
当设备旋转时，还有一个orientationchange 事件会在window 对象上触发。
You can also use CSS media queries to determine if the iPad is being held in vertical or horizontal orientation, such as:
您还可以使用 CSS 媒体查询来确定 iPad 是处于垂直还是水平方向，例如：
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
<script type="text/javascript">
var updateLayout = function() {
if (window.innerWidth != currentWidth) {
currentWidth = window.innerWidth;
var orient = (currentWidth == 320) ? "profile" : "landscape";
document.body.setAttribute("orient", orient);
window.scrollTo(0, 1);
}
};
iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 400);
</script>
回答by mdale
You can use the orientationchange event like so:
您可以像这样使用orientationchange事件：
window.addEventListener('orientationchange', function(){
/* update layout per new orientation */
});
回答by Gajus
You can use mediaMatchto evaluate CSS media queries, e.g.
您可以使用mediaMatch来评估 CSS 媒体查询，例如
window
.matchMedia('(orientation: portrait)')
.addListener(function (m) {
if (m.matches) {
// portrait
} else {
// landscape
}
});
CSS media query fires before the orientationchange. If you are looking to capture the end of the event (when the rotation has been completed), see mobile viewport height after orientation change.
CSS 媒体查询在orientationchange. 如果您要捕获事件的结束（旋转完成时），请参阅方向更改后的移动视口高度。
回答by Bryan Dartout
An easy to use snippet :
一个易于使用的代码段：
function doOnOrientationChange()
{
switch(window.orientation)
{
case -90:
case 90:
// alert('landscape');
$('#portrait').css({display:'none'});
$('#landscape').css({display:'block'});
break;
default:
// alert('portrait');
$('#portrait').css({display:'block'});
$('#landscape').css({display:'none'});
break;
}
}
window.addEventListener('orientationchange', doOnOrientationChange);
// First launch
doOnOrientationChange();
回答by lowtechsun
From "Cross-device, cross-browser portrait-landscape detection"
来自“跨设备、跨浏览器的人像-横向检测”
This is about finding out whether a mobile device is in portrait or landscape mode; you don't need to care about its orientation. For all you know, if you hold your iPad upside down, it's in portrait mode.
这是关于找出移动设备是处于纵向模式还是横向模式；你不需要关心它的方向。据您所知，如果您将 iPad 倒置，则它处于纵向模式。
$(window).bind("resize", function(){
screenOrientation = ($(window).width() > $(window).height())? 90 : 0;
});
90 means landscape, 0 means portrait, cross browser, cross device.
90 表示横向，0 表示纵向，跨浏览器，跨设备。
The window.onresize event is available everywhere, and it's always fired at the right time; never too early, never too late. As a matter of fact, the size of the screen is always accurate as well.
window.onresize 事件随处可用，而且总是在正确的时间触发；永远不会太早，永远不会太晚。事实上，屏幕的大小也总是准确的。
The JavaScript version would be this, correct me please if I am wrong.
JavaScript 版本是这样的，如果我错了，请纠正我。
function getScreenOrientation() {
screenOrientation = window.outerWidth > window.outerHeight ? 90 : 0;
console.log("screenOrientation = " + screenOrientation);
}
window.addEventListener("resize", function(event) {
getScreenOrientation();
});
getScreenOrientation();
回答by hachev
window.orientation is what you're looking for. there's also an onOrientationChange event works for android, iphone and, i'm mostly sure, for ipad
window.orientation 就是你要找的。还有一个 onOrientationChange 事件适用于 android、iphone，我很确定，适用于 ipad
回答by Hugo
Adding to the @mplungjan answer, I found better results using the webkit "native" (I don't really how to called it) event, 'deviceorientation'.
添加到@mplungjan 答案中，我发现使用 webkit“本机”（我真的不知道如何称呼它）事件“ deviceorientation”的结果更好。
In the Mozilla Developer networkthey have a good explanation about how to normalize between webkit and Gecko that helped me to solve this problem.
在Mozilla 开发人员网络中，他们对如何在 webkit 和 Gecko 之间进行规范化有很好的解释，这帮助我解决了这个问题。
