zoukankan      html  css  js  c++  java
  • 基于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});//横竖屏转换的时候触发

  • 相关阅读:
    js中获取页面被卷去的高度等一些属性
    【转】js中cookie的使用详细分析
    2017-3-16 Tsql基础编程 存储过程 触发器 级联删除
    采用ajax请求返回得到json数据,取出具体项却为undefined
    读书笔记-你不知道的JavaScript(上) 【转自 http://muyunyun.cn/】
    AJAX 三级联动
    winform 打印控件
    winform 之MDI容器
    ajax完整版
    【2017-7-17】动软代码生成器 数据库连接 配置失败 解决方法
  • 原文地址:https://www.cnblogs.com/lilyimage/p/4059712.html
Copyright © 2011-2022 走看看