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

Question

我知道在iPhone上的Safari中,你可以通过听取onorientationchange事件和查询window.orientation角度来检测屏幕的方向和方向的变化.

这可能在Android手机上的浏览器中出现吗？

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

Answer 1

跨不同设备的实际行为是不一致的.resize和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          |
|----------------+-------------------+-------------+------------+--------------|

Answer 2

要检测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 3

两位傻瓜的优秀答案提供了所有背景,但让我尝试一下简明实用的总结,介绍如何在iOS和Android上处理方向变化:

• 如果您只关心窗口尺寸(典型情况) - 而不是特定方向:
  • resize仅处理事件.
  • 在您的处理程序,作用window.innerWidth和window.InnerHeight唯一.
  • 不要使用window.orientation- 它在iOS上不会是最新的.

• 如果您关心具体方向:
  • 仅处理resizeAndroid上的事件,仅orientationchange处理iOS上的事件.
  • 在你的处理程序中,对window.orientation(window.innerWidth和window.InnerHeight)行动

这些方法比记住以前的方向和比较提供了一些好处:

• 只有尺寸的方法在桌面浏览器上开发时也可以工作,这些浏览器可以模拟移动设备,例如Chrome 23.(window.orientation在桌面浏览器上不可用).
• 不需要全局/匿名文件级函数包装级变量.

Answer 4

您可以随时收听窗口调整大小事件.如果在那个事件中,窗口从高宽度变宽到宽度高(反之亦然),你可以非常确定手机方向刚刚改变.