首页 > 代码库 > 基于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的横竖屏状态
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。