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

我知道，在iPhone上的Safari中，您可以通过收听

onorientationchange

事件并查询

window.orientation

来检测屏幕的方向和方向的变化

在安卓手机的浏览器中，这可能吗

---

说清楚一点，我想问的是，标准网页上运行的JavaScript是否可以检测到安卓设备的旋转。这在iPhone上是可能的，我想知道是否可以在Android手机上实现。

您可以随时收听窗口调整事件。如果在该事件中，窗口从高过宽变为宽过高（反之亦然），您可以非常确定手机方向刚刚更改。

要在Android浏览器上检测方向更改，请将侦听器连接到

窗口上的
方向更改
或
调整大小
事件：

// 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并非如此）。
不同设备的实际行为不一致。resize和orientationChange事件可以以不同的频率以不同的顺序触发。此外，某些值（例如屏幕宽度和窗口方向）并不总是在您期望的时候更改避开屏幕。宽度——在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          |
|----------------+-------------------+-------------+------------+--------------|
|==============================================================================|
|设备|触发事件|方向|内部宽度|屏幕宽度|
|==============================================================================|
|iPad 2 |调整大小| 0 | 1024 | 768|
|（对景观）方向变化90 1024 768|
|----------------+-------------------+-------------+------------+--------------|
|iPad 2 |调整大小| 90 | 768 | 768|
|（对肖像）方向变化0 | 768 | 768|
|----------------+-------------------+-------------+------------+--------------|
|iPhone 4 |调整大小| 0 | 480 | 320|
|（对景观）方位变化90 480 320|
|----------------+-------------------+-------------+------------+--------------|
|iPhone 4 |调整大小| 90 | 320 | 320|
|（对肖像）方位变化0 | 320 | 320|
|----------------+-------------------+-------------+------------+--------------|
|机器人手机|方位改变| 90 | 320 | 320|
|（对景观）调整大小| 90 | 569 | 569|
|----------------+-------------------+-------------+------------+--------------|
|机器人电话|方向改变| 0 | 569 | 569|
|（至纵向）|调整大小| 0 | 320 | 320|
|----------------+-------------------+-------------+------------+--------------|
|三星Galaxy |方向更改| 0 | 400 | 400|
|平板电脑|方向更改| 90 | 400 | 400|
|（至景观）|方向变化| 90 | 400 | 400|
||调整大小| 90 | 683 | 683|
||方向变化| 90 | 683 | 683|
|----------------+-------------------+-------------+------------+--------------|
|三星Galaxy |方位变化| 90 | 683 | 683|
|平板电脑|方向更改| 0 | 683 | 683|
|（对肖像）方向改变0 | 683 | 683|
||调整大小| 0 | 400 | 400|
||方向变化| 0 | 400 | 400|
|----------------+-------------------+-------------+------------+--------------|
这在HTML5中是可能的。

您可以在此处阅读更多内容（并尝试现场演示）：

它还支持deskop浏览器，但总是返回相同的值。
对两位傻瓜的答案有点贡献：

如droid phones上的表所述，“OrientionChange”事件在“resize”事件之前触发，因此阻止了下一个resize调用（因为if语句）。宽度属性仍未设置

一个可能不是完美的解决办法是不要触发“方向改变”事件。可以通过在“if”语句中包装“orientationchange”事件绑定来存档：

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

希望能有帮助

（测试是在Nexus S上完成的）
值得注意的是，在我的Epic 4G Touch上，在任何javascript android调用工作之前，我必须设置webview以使用WebChromeClient

webView.setWebChromeClient(new WebChromeClient());

另一个问题是，一些安卓平板电脑（我相信是摩托罗拉Xoom，我正在测试的是低端Elonex平板电脑，可能还有其他平板电脑）设置了加速度计，以便在局域网中window.orientation==0
webView.setWebChromeClient(new WebChromeClient());

$(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);
}

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

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");
            }   
        });
    }

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