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

Question

我知道，在iPhone上的Safari中，您可以通过侦听onorientationchange事件并查询window.orientation角度来检测屏幕的方向和方向更改。

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

为了清楚起见，我在询问是否可以在标准网页上运行JavaScript检测到Android设备的旋转。这可能是在iPhone上，我想知道是否可以为Android手机完成。

Answer 1

为了检测在Android浏览器的方向变化，附加一个监听器orientationchange或resize事件上window：

// 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的情况）。

Answer 2

您可以随时收听窗口大小调整事件。如果在这种情况下，窗户从高到宽比高到高（反之亦然），您可以确定手机方向刚刚改变。

Answer 3

跨不同设备的实际行为不一致。调整大小和orientationChange事件可以以不同的频率以不同的顺序发射。此外，某些值（例如screen.width和window.orientation）在您期望时并不总是变化。 避免screen.width - 在iOS中旋转时不会改变。

可靠的方法是侦听调整大小和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   | 
|----------------+-------------------+-------------+------------+--------------| 

Answer 4

它可能在HTML5中。
您可以在这里阅读更多（并尝试现场演示）：http://slides.html5rocks.com/#slide-orientation。

window.addEventListener('deviceorientation', function(event) { 
    var a = event.alpha; 
    var b = event.beta; 
    var g = event.gamma; 
}, false); 

它还支持桌面浏览器，但它将始终返回相同的值。

Answer 5

两个位傻瓜的回答一点贡献：

作为DROID手机放在桌子上描述的“orientationchange”事件被早于炒“调整”事件从而阻断下一个调整大小调用（因为如果声明）。宽度属性仍未设置。

尽管可能不是一个完美的解决方法，但可能不会触发“orientationchange”事件。这可以通过包装“orientationchange”事件绑定归档“如果”声明：

if (!navigator.userAgent.match(/android/i)) 
{ 
    window.addEventListener("orientationchange", checkOrientation, false); 
} 

希望它可以帮助

（测试在Nexus S的完成）

Answer 6

值得一提的是，在我的4G的史诗触摸我必须在任何JavaScript android调用工作之前设置webview以使用WebChromeClient。

webView.setWebChromeClient(new WebChromeClient()); 

Answer 7

另一种疑难杂症 - 一些Android平板电脑（在摩托罗拉XOOM，我相信和低端Elonex一个我做了一些测试上，可能其他人也）有自己的加速度计设置，使window.orientation == 0在景观模式下，不是人像！

Answer 8

存储双比特的傻瓜的出色答卷提供所有的背景，但让我尝试如何处理跨iOS和Android方向变化的简洁，务实总结：

• 如果你只在乎窗口尺寸（典型场景） - 而不是关于特定方向：
  • 仅处理resize事件。
  • 在您的处理程序中，仅对window.innerWidth和window.InnerHeight采取行动。
  • 请勿使用window.orientation - 它不会在iOS上使用。

• 如果你不关心特定方向：
  • 手柄只 Android上的resize事件，只有的orientationchange事件iOS上。
  • 在您的处理程序，作用于window.orientation（和window.innerWidth和window.InnerHeight）

这些方法提供了在回忆以前的定位和比较轻微的好处：

• 尺寸，唯一的方法还可以在桌面浏览器上开发，否则可以模拟移动设备，例如Chrome 23.（window.orientation在桌面浏览器上不可用）。
• 不需要全局/匿名文件级函数包装器级变量。

Answer 9

我有同样的问题。我正在使用Phonegap和Jquery mobile，用于Adroid设备。 要正确调整，我不得不设置超时：

$(window).bind('orientationchange',function(e) { 
    fixOrientation(); 
}); 

$(window).bind('resize',function(e) { 
    fixOrientation(); 
}); 

function fixOrientation() { 

    setTimeout(function() { 

     var windowWidth = window.innerWidth; 

     $('div[data-role="page"]').width(windowWidth); 
     $('div[data-role="header"]').width(windowWidth); 
     $('div[data-role="content"]').width(windowWidth-30); 
     $('div[data-role="footer"]').width(windowWidth); 

    },500); 
} 

Answer 10

跨浏览器的方式

$(window).on('resize orientationchange webkitfullscreenchange mozfullscreenchange fullscreenchange', function(){ 
//code here 
}); 

Answer 11

这里是解决方案：

var isMobile = { 
    Android: function() { 
     return /Android/i.test(navigator.userAgent); 
    }, 
    iOS: function() { 
     return /iPhone|iPad|iPod/i.test(navigator.userAgent); 
    } 
}; 
if(isMobile.Android()) 
    { 
     var previousWidth=$(window).width(); 
     $(window).on({ 
     resize: function(e) { 
     var YourFunction=(function(){ 

      var screenWidth=$(window).width(); 
      if(previousWidth!=screenWidth) 
      { 
       previousWidth=screenWidth; 
       alert("oreientation changed"); 
      } 

     })(); 

     } 
    }); 

    } 
    else//mainly for ios 
    { 
     $(window).on({ 
      orientationchange: function(e) { 
       alert("orientation changed"); 
      } 
     }); 
    } 

Answer 12

你可以尝试的解决方案，兼容所有浏览器。

以下是orientationchange兼容性图： 因此 ，我创作一个orientaionchange填充工具，它是一个基于@media属性来解决orientationchange实用library-- orientationchange-fix

window.addEventListener('orientationchange', function(){ 
if(window.neworientation.current === 'portrait|landscape'){ 
    // do something…… 
} else { 
    // do something…… 
} 
}, false);