用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变量。