zoukankan      html  css  js  c++  java
  • 检测移动设备横竖屏

    • 使用场景

    移动端的开发过程中,免不了要判断横竖屏,然后在执行其他操作,比如分别加载不同样式,横屏显示某些内容,竖屏显示其他内容等等。

    • 如何判断

    移动设备提供了两个对象,一个属性,一个事件:

    • window.orientation   属于window对象上一个属性;共有三个值 :0为竖屏模式(portrait),90为向左反转变为横屏模式(landscape),-90为向右反转变为横屏模式(landscape),最后180就是设备上下互换还是竖屏模式。
    • orientationchange     是一个event,在设备旋转时,会触发此事件,如同PC上使用的resize事件。

    这两个搭配起来使用,很容易就能获得设备的横竖屏状态,代码如下:

    复制代码
    (function(){
        var init = function(){
            var updateOrientation = function(){
                var orientation = window.orientation;
                switch(orientation){
                    case 90:
                    case -90:
                        orientation = 'landscape';
                        break;
                    default:
                        orientation = 'portrait';
                        break;
                }
    
               //do something
               //比如在html标签加一个状态
                //然后根据不同状态,显示不同大小
                document.body.parentNode.setAttribute('class',orientation);
            };
    
            window.addEventListener('orientationchange',updateOrientation,false);
            updateOrientation();
        };
    
        window.addEventListener('DOMContentLoaded',init,false);
    })();
    复制代码

    在css中就可以这样写:

    复制代码
    /**竖屏 div边框显示蓝色**/
    .portrait body div{
        border:1px solid blue;
    }
    /**竖屏 div边框显示黄色**/
    .landscape body div{
        border:1px solid yellow;
    }
    复制代码

    当然还可以使用media queries的方式(推荐这种):

    复制代码
    @media all and (orientation: portrait) {
      body div {
        border:1px solid blue;
      }
    }
    @media all and (orientation: landscape) {
      body div {
        border:1px solid yellow;
      }
    }
    复制代码
    • 兼容性

    如果window.orientation或者orientationchange在设备中不存在的情况怎么处理呢?(一般一个不存在,另一个也不存在,反之)

    在前期开发中,经常会用Chrome的device model调式,但是这个属性确实不存在,哪怎么获得这个值呢?简单的方式就是依据宽和高的大小比较判断,宽小于高为竖屏,宽大与高就是横屏。

    获得结果的方式知道了,接下来就是怎么监听设备反转事件了,既然orientationchange不可用,就使用最基本的resize事件或者使用定时器检测,还是看代码:

    复制代码
    (function(){
        var updateOrientation = function(){
            var orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';
    
            document.body.parentNode.setAttribute('class',orientation);
        };
    
        var init = function(){
    
            updateOrientation();
    
            //每5秒检查一次
            //window.setInterval(updateOrientation,5000);
            
            //监听resize事件
            window.addEventListener('resize',updateOrientation,false);
        };
    
        window.addEventListener('DOMContentLoaded',init,false);
    })();
    复制代码

    最后,把以上两种方式合起来,就是一个完整的检测解决方案

    复制代码
    (function(){
        var supportOrientation = (typeof window.orientation === 'number' &&
                typeof window.onorientationchange === 'object');
    
        var init = function(){
            var htmlNode = document.body.parentNode,
                orientation;
            var updateOrientation = function(){
                if(supportOrientation){
                    orientation = window.orientation;
                    switch(orientation){
                        case 90:
                        case -90:
                            orientation = 'landscape';
                            break;
                        default:
                            orientation = 'portrait';
                            break;
                    }
                }else{
                    orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';
                }
                htmlNode.setAttribute('class',orientation);
            };
    
            if(supportOrientation){
                window.addEventListener('orientationchange',updateOrientation,false);
            }else{
                //监听resize事件
                window.addEventListener('resize',updateOrientation,false);
            }
    
            updateOrientation();
        };
    
        window.addEventListener('DOMContentLoaded',init,false);
    })();
    复制代码
  • 相关阅读:
    BZOJ3884 上帝与集合的正确用法 【欧拉定理】
    BZOJ4872 [六省联考2017]分手是祝愿 【期望dp】
    BZOJ4650 [NOI2016]优秀的拆分 【后缀数组】
    BZOJ1562 [NOI2009]变换序列 【KM算法】
    BZOJ2657 [Zjoi2012]旅游(journey) 【树的直径】
    BZOJ3999 [TJOI2015]旅游 【树剖 + 线段树】
    BZOJ3997 [TJOI2015]组合数学 【Dilworth定理】
    BZOJ4823 [Cqoi2017]老C的方块 【最小割】
    坐标系统
    利用键盘左右键使图像左右移动,上下键使图像的两个纹理可见度比例上下调整
  • 原文地址:https://www.cnblogs.com/wujindong/p/5341975.html
Copyright © 2011-2022 走看看