用JavaScript在浏览器中检测Android手机的旋转
我知道在iPhone上的Safari中，您可以通过侦听onorientationchange事件和查询window.orientation角度来检测屏幕的方向和方向更改。
这在Android手机的浏览器中可能吗？
很明显，我在问一个标准网页上运行的JavaScript是否可以检测到Android设备的旋转。 这可能是在iPhone上，我想知道是否可以为Android手机完成。
要在Android浏览器上检测方向更改，请将侦听器附加到orientationchange或在window上resize事件resize ：
// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width);
}, false);
检查window.orientation属性以确定设备面向哪个方向。 使用Android手机时， screen.width或screen.height也会在设备旋转时更新。 （这不是iPhone的情况）。
不同设备之间的实际行为不一致 。 调整大小和orientationChange事件可以以不同的频率以不同的顺序发射。 此外，某些值（例如，screen.width和window.orientation）并不总是随预期而改变。 避免screen.width - 在iOS中旋转时不会改变。
可靠的方法是同时听取resize和orientationChange事件 （将某些轮询作为安全措施），最终您将获得有效的方向值。 在我的测试中，Android设备有时无法在完整旋转180度时触发事件，因此我还包含了一个setInterval来轮询方向。
var previousOrientation = window.orientation;
var checkOrientation = function(){
if(window.orientation !== previousOrientation){
previousOrientation = window.orientation;
// orientation changed, do your magic here
}
};
window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);
// (optional) Android doesn't always fire orientationChange on 180 degree turns
setInterval(checkOrientation, 2000);
以下是我测试过的四个设备的结果（对于ASCII表格感到抱歉，但它似乎是呈现结果的最简单方式）。 除了iOS设备之间的一致性之外，各种设备还有很多种类。 注意：事件按照他们触发的顺序列出。
|==============================================================================| | Device | Events Fired | orientation | innerWidth | screen.width | |==============================================================================| | iPad 2 | resize | 0 | 1024 | 768 | | (to landscape) | orientationchange | 90 | 1024 | 768 | |----------------+-------------------+-------------+------------+--------------| | iPad 2 | resize | 90 | 768 | 768 | | (to portrait) | orientationchange | 0 | 768 | 768 | |----------------+-------------------+-------------+------------+--------------| | iPhone 4 | resize | 0 | 480 | 320 | | (to landscape) | orientationchange | 90 | 480 | 320 | |----------------+-------------------+-------------+------------+--------------| | iPhone 4 | resize | 90 | 320 | 320 | | (to portrait) | orientationchange | 0 | 320 | 320 | |----------------+-------------------+-------------+------------+--------------| | Droid phone | orientationchange | 90 | 320 | 320 | | (to landscape) | resize | 90 | 569 | 569 | |----------------+-------------------+-------------+------------+--------------| | Droid phone | orientationchange | 0 | 569 | 569 | | (to portrait) | resize | 0 | 320 | 320 | |----------------+-------------------+-------------+------------+--------------| | Samsung Galaxy | orientationchange | 0 | 400 | 400 | | Tablet | orientationchange | 90 | 400 | 400 | | (to landscape) | orientationchange | 90 | 400 | 400 | | | resize | 90 | 683 | 683 | | | orientationchange | 90 | 683 | 683 | |----------------+-------------------+-------------+------------+--------------| | Samsung Galaxy | orientationchange | 90 | 683 | 683 | | Tablet | orientationchange | 0 | 683 | 683 | | (to portrait) | orientationchange | 0 | 683 | 683 | | | resize | 0 | 400 | 400 | | | orientationchange | 0 | 400 | 400 | |----------------+-------------------+-------------+------------+--------------|
两位傻瓜的优秀答案提供了所有背景知识，但让我尝试一下如何在iOS和Android上处理方向更改的简明实用总结 ：
resize事件。 window.innerWidth和window.InnerHeight 。 window.orientation - 它不会是iOS上的最新版本。 resize事件，并且仅处理iOS上的orientationchange事件。 window.orientation （和window.innerWidth和window.InnerHeight ） 这些方法比记住以前的方向和比较略有好处：
window.orientation在桌面浏览器上不可用）时，仅尺寸方法也可以使用。 上一篇: Detect rotation of Android phone in the browser with JavaScript