首页 > 代码库 > 基于zepto判断mobile的横竖屏状态

基于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});//横竖屏转换的时候触发

 

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