基于zepto判断mobile的横竖屏状态
2024-09-01 14:16:03
借用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});//横竖屏转换的时候触发
最新文章
- 【.net 深呼吸】细说CodeDom(2):表达式、语句
- 20145223《信息安全系统设计基础》 GDB调试汇编堆栈过程分析
- 例子:Background Agent Sample
- HTML、CSS和JS
- 判断DataTable是否为空
- DataRow.RowState 属性
- BestCoder Round #14
- 通达OA 小飞鱼开发培训第四讲 工作流介绍(图文)
- 搜索广告与广告网络Demand技术-探索与利用
- python在windows下使用setuptools安装egg文件
- python大作业
- windows 上查看一个命令的退出码
- linux init命令
- python timeit
- Structs 2 session 学习
- T4模板根据数据库表和列的Description生成代码的summary的终极解决方案
- 转CentOS — MySQL备份 Shell 脚本
- mvc上传图片(上传和预览)webuploader
- js 柯里化Currying
- SpringMVC解决跨域问题及CROS