用JavaScript检测Android手机在浏览器中的旋转

Question

用JavaScript检测Android手机在浏览器中的旋转

我知道在iPhone上的Safari中，您可以通过监听onorientationchange事件和查询window.orientation为了这个角度。

这在Android手机的浏览器中是可能的吗？

为了清楚起见，我想问的是，android设备的旋转是否可以被JavaScript在标准网页上运行。这在iPhone上是可能的，我想知道它是否可以用于Android手机。

Answer 1

实际不同设备之间的行为不一致。..调整大小和方向变化事件可以在不同的序列中以不同的频率触发。另外，某些值(例如屏幕宽度和窗口方向)并不总是在您期望的时候改变。避免屏幕宽度-在IOS中旋转时，它不会改变。可靠的方法是同时听调整大小和方向变化的事件(使用一些轮询作为安全捕获)，您最终将获得一个方向的有效值。在我的测试中，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 turnssetInterval(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          | |----------------+-------------------+-------------+------------+--------------|

Answer 2

二位傻瓜的优秀答案提供了所有的背景，但让我尝试一个关于如何处理IOS和Android中的方向变化的简明、务实的摘要:如果你只关心窗口尺寸(典型情景)-而不是关于具体方向：处理resize只有事件。在你的处理程序中，采取行动window.innerWidth和window.InnerHeight只有。不使用window.orientation-它不会在IOS上流行。如果你真的关心特定取向:手柄只这个resize事件发生在Android上，以及只这个orientationchange事件发生在IOS上。在你的处理程序中，采取行动window.orientation(和window.innerWidth和window.InnerHeight)这些方法比记住以前的方向和比较略有好处：在桌面浏览器上开发时，这种只使用维度的方法也是有效的，这些浏览器可以模拟移动设备，例如Chrome 23。(window.orientation在桌面浏览器上不可用)。不需要global/anonymous-file-level-function-wrapper-level变量。