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

2020/10/19 17:42 · javascript ·  · 0评论

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

Android手机上的浏览器有可能吗?

明确地说,我想问的是,运行在标准网页上的JavaScript是否可以检测到Android设备的旋转可以在iPhone上使用,我想知道是否可以在Android手机上完成。

要检测Android浏览器上的方向变化,请将侦听器附加到上的orientationchangeresize事件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并非如此)。

跨不同设备的实际行为是不一致的resize和directionChange事件可以以不同的顺序以不同的频率触发。另外,某些值(例如screen.width和window.orientation)并非总是在您期望的时候改变。避免使用screen.width-在iOS中旋转时不会更改。

可靠的方法是同时监听resize和directionChange事件(将一些轮询作为安全措施),最终您将获得一个有效的方向值。在我的测试中,将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设备之间的一致性外,跨设备还有很多不同之处。注意:事件以其触发的顺序列出。

| ================================================= =========================== |
| 设备| 事件已触发| 方向| innerWidth | screen.width |
| ================================================= =========================== |
| 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 |
| ---------------- + ------------------- + ------------ -+ ------------ + -------------- |
| Droid手机| 方向变化| 90 | 320 | 320 |
| (至景观)| 调整大小 90 | 569 | 569 |
| ---------------- + ------------------- + ------------ -+ ------------ + -------------- |
| Droid手机| 方向变化| 0 | 569 | 569 |
| (至肖像)| 调整大小 0 | 320 | 320 |
| ---------------- + ------------------- + ------------ -+ ------------ + -------------- |
| 三星银河| 方向变化| 0 | 400 | 400 |
| 平板电脑| 方向变化| 90 | 400 | 400 |
| (至景观)| 方向变化| 90 | 400 | 400 |
| | 调整大小 90 | 683 | 683 |
| | 方向变化| 90 | 683 | 683 |
| ---------------- + ------------------- + ------------ -+ ------------ + -------------- |
| 三星银河| 方向变化| 90 | 683 | 683 |
| 平板电脑| 方向变化| 0 | 683 | 683 |
| (至肖像)| 方向变化| 0 | 683 | 683 |
| | 调整大小 0 | 400 | 400 |
| | 方向变化| 0 | 400 | 400 |
| ---------------- + ------------------- + ------------ -+ ------------ + -------------- |

两位傻瓜的绝妙答案提供了所有背景知识,但让我尝试一下有关如何处理iOS和Android方向变化简明实用的摘要

  • 如果您只关心窗口尺寸(典型情况) -而不关心特定方向:

    • resize处理事件。
    • 在您的处理程序,作用window.innerWidthwindow.InnerHeight唯一。
    • 请勿使用window.orientation-它在iOS上不是最新的。
  • 如果您确实关心特定的方向

    • 处理resizeAndroid上的事件,orientationchangeiOS上的事件。
    • 在您的处理程序中,对window.orientation(和window.innerWidthwindow.InnerHeight)进行操作

与记住先前的方向并进行比较相比,这些方法提供了一些好处:

  • 仅维度方法也可以在桌面浏览器上开发,该浏览器可以模拟移动设备(例如Chrome 23)(window.orientation在桌面浏览器上不可用)。
  • 不需要全局/匿名文件级功能包装器级变量。

您始终可以收听窗口调整大小事件。如果在这种情况下,窗口从大于宽的窗口变为大于宽的窗口(反之亦然),则可以确定电话方向刚刚改变。

在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);

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

我有同样的问题。我正在为Adroid设备使用Phonegap和Jquery mobile。要正确调整大小,我必须设置一个超时时间:

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

解决方法如下:

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

另一个陷阱-某些Android平板电脑(我相信是Motorola Xoom和我正在对其进行测试的低端Elonex,也许还有其他)也对其加速度计进行了设置,以使window.orientation == 0在LANDSCAPE模式下而不是纵向模式!

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

以下是orientationchange兼容性图片:
兼容性
因此,我编写了一个
orientaionchangepolyfill,它是基于@media属性来修复directionchange实用程序库的—directionchange -fix

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

值得注意的是,在我的Epic 4G Touch上,必须先将Webview设置为使用WebChromeClient,然后才能进行任何javascript android调用。

webView.setWebChromeClient(new WebChromeClient());

跨浏览器方式

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

对两位傻瓜的回答有一点贡献:

如droid手机上的表格所述,“ orientationchange”事件比“ resize”事件更早触发,从而阻止了下一个resize调用(由于if语句)。宽度属性仍未设置。

一种解决方法虽然可能不是一个完美的解决方法,但可能是不触发“ orientationchange”事件。可以通过将“ orientationchange”事件绑定包装在“ if”语句中来存档:

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

希望能帮助到你

(测试是在Nexus S上完成的)

本文地址:http://javascript.askforanswer.com/shiyongjavascriptjianceandroidshoujizailiulanqizhongdexuanzhuan.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!