基于zepto判断mobile的横竖屏状态

借用jquery mobile中的代码,删除了一些多余的部分,简单的基于zepto的模块

var CheckOrientation = (function(){
    var win = $( window ),
        get_orientation,
        last_orientation,
        initial_orientation_is_landscape,
        initial_orientation_is_default,
        portrait_map = { "0": true, "180": true },
        ww, wh, landscape_threshold;

    if(window.orientation !== undefined){
        ww = window.innerWidth || win.width();
        wh = window.innerHeight || win.height();
        landscape_threshold = 50;

        initial_orientation_is_landscape = ww > wh && ( ww - wh ) > landscape_threshold;
        initial_orientation_is_default = portrait_map[ window.orientation ];

        // (初始是横屏,方向是0或者180), *OR*
        // 初始是竖屏,方向是90或者-90, we
        //需要调整portrait_map
        if ( ( initial_orientation_is_landscape && initial_orientation_is_default ) || ( !initial_orientation_is_landscape && !initial_orientation_is_default ) ) {
          portrait_map = { "-90": true, "90": true };
        }

    }
      /**
       * 判断是横竖屏
       * @return {[type]} [description]
       */
    function get_orientation(){
        var isPortrait = true, elem = document.documentElement;

        if ( window.orientation !== undefined ) {

            isPortrait = portrait_map[ window.orientation ];
        } else {
            isPortrait = elem && elem.clientWidth / elem.clientHeight < 1.1;
        }

        return isPortrait ? "portrait" : "landscape";
    }

    last_orientation = get_orientation();

    function handler() {
        var orientation = get_orientation();
        if ( orientation !== last_orientation ) {
            last_orientation = orientation;
            win.trigger(‘orientation:change‘,[last_orientation]);//借用zepto的trigger事件
        }
    }
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", handler, false); 

    return {
        get_orientation : get_orientation
    }
})();

如何使用:

(1)CheckOrientation.get_orientation() //返回的是“portrait”:表示竖屏,返回的是“landscape”表示横屏

(2)$(window).on(‘orientation:change‘,function(e,type){//其中type值是portrait或者是landscape});//横竖屏转换的时候触发

时间: 2024-11-07 07:08:27

基于zepto判断mobile的横竖屏状态的相关文章

Javascript 判断手机横竖屏状态

判断手机横竖屏状态: <script type=”text/javascript”> function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert(“竖屏状态!”) } if(window.orientation==90||window.orientation==-90){ alert(“横屏状态!”) } } window.addEventListener(“onorientationcha

python3:判断手机的亮屏状态

在用python对手机做一些自动化操作时,常常会判断手机的亮屏状态,知晓手机的亮屏状态后才好做进一步的动作,如给屏幕解锁等.  用于了解手机的亮屏情况,有一个adb命令可用: adb shell dumpsys window polic 分别在灭屏和亮屏的情况下run这个adb command,看打印出的info有何不同? 从图中可看出, 亮屏和灭屏的状态,有几行是有明显不一样的.任挑一行用来作为check数据都是可以的,为了简便,我们挑最明显最短的: mAwake=false为详细明了解che

响应设备的横竖屏状态,旋转界面 达到横竖屏效果

监听 UIDeviceOrientationDidChangeNotification的广播,再根据[[UIDevice currentDevice] orientation]获取到屏幕的方向. -(void) viewDidLoad {      // Request to turn on accelerometer and begin receiving accelerometer events      [[UIDevice currentDevice] beginGeneratingDe

css3媒体查询判断移动设备横竖屏

/* 设备竖屏时调用该段css代码 */ @media all and (orientation : portrait){ body{ background-color:blue; } } /* 设备横屏时调用该段css代码 */ @media all and (orientation : landscape){ body { background-color:red; } }

判断手机横竖屏

//判断手机横竖屏状态:window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() { if (window.orientation === 180 || window.orientation === 0) { //竖屏 } if (window.orientation === 90 || window.o

修正Android基于ZXing的二维码扫描——横竖屏自由切换

概述: 此博客是基于开源的框架ZXing.ZXing用Java实现的多种格式的1D/2D条码图像处理库,它包含了联系到其他语言的端口.ZXing可以实现使用手机的内置的摄像头完成条形码的扫描及解码.该项目可实现的条形码编码和解码. 资源下载: http://download.csdn.net/detail/u013761665/8853561 修改为竖屏显示: 第1步: 进入com.google.zxing.client.android包下的CaptureActivity类: 注释以下代码: i

更靠谱的横竖屏检测方法

参考链接:http://www.cnblogs.com/zhansingsong/p/5866692.html 前不久,做了一个H5项目,需要在横竖屏变化时,做一些处理.毫无疑问,需要使用orientationchange来监听横竖屏的变化. 方案一: // 监听 orientation changes window.addEventListener("orientationchange", function(event) { // 根据event.orientation|screen

android开发之activity横竖屏切换时的生命周期以及横竖屏切换时的资源适配方案

背景:之前有过两篇写activity的博客 android之activity的生命周期详解:详细介绍了activity的整个生命周期.各状态间的转换和返回桌面时保存activity的状态 android之activity中onSaveInstanceState和onRestoreInstanceState的触发时机:介绍了activity中这两个方法的触发时机和作用 本篇博客会牵扯到里面的内容,如果你都有所了解可以直接往下看,如果不了解可以进去回忆下. 问题:在做应用的退出对话框时,发现如果对话

iphone手机不同版本兼容、横竖屏

/* 兼容问题*/ @media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){ .dialog-agreement-con{ height: 45%; /* iphone4*/ } } @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-dev