基于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的横竖屏状态的更多相关文章
- JS获取移动端系统信息(操作系统、操作系统版本、横竖屏状态、设备类型、网络状态、生成浏览器指纹)
function getOS() { // 获取当前操作系统 var os; if (navigator.userAgent.indexOf('Android') > -1 || navigat ...
- python3:判断手机的亮屏状态
在用python对手机做一些自动化操作时,常常会判断手机的亮屏状态,知晓手机的亮屏状态后才好做进一步的动作,如给屏幕解锁等. 用于了解手机的亮屏情况,有一个adb命令可用: adb shell du ...
- js判断手机的横竖屏调整样式
在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢.首先需要在head中加入如下代码: <meta name="viewport" content= ...
- orientation属性(判断是否为横竖屏)
现在有一个需求:移动端网页默认竖屏显示,当用户横屏浏览,就给予相应提示,比如横屏时显示下面截图提示信息 几年前,可能大家想到用 window.orientation 属性来实现,现官方已弃用,不做推荐 ...
- css3媒体查询判断移动设备横竖屏
/* 设备竖屏时调用该段css代码 */ @media all and (orientation : portrait){ body{ background-color:blue; } } /* ...
- Mobile Web开发 处理设备的横竖屏
为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间.由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的 ...
- JS判断手机横竖屏
在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 屏幕方向对应的window.orientat ...
- 【转】Android横竖屏切换问题
Android横竖屏切换总结(Android资料) Android横竖屏要解决的问题应该就两个: 一.布局问题 二.重新载入问题 1.布局问题:如果不想让软件在横竖屏之间切换,最简单的办法就是在项目的 ...
- Android横竖屏切换总结
Android横竖屏切换总结(Android资料) Android横竖屏要解决的问题应该就两个: 一.布局问题 二.重新载入问题 1.布局问题:如果不想让软件在横竖屏之间切换,最简单的办法就是在项目的 ...
随机推荐
- TeamViewer11的安全设置
一.关闭随机密码,使用固定的复杂密码 二.关闭文件共享传输 三.关闭在线状态,关闭会议功能
- SQLServer日期格式化
0 或 100 (*) 默认值 mon dd yyyy hh:miAM(或 PM) 1 101 美国 mm/dd/yyyy ...
- CameraFlash手电筒
有时候晚上找不到电棒,电灯,咱们可以写个小程序,利用照相机的闪光灯临时顶替上代码: 1 package com.linux.cameraflash; import android.hardware.C ...
- Linux System Account SSH Weak Password Detection Automatic By System API
catalog . Linux弱口令攻击向量 . Linux登录验证步骤 . PAM . 弱口令风险基线检查 1. Linux弱口令攻击向量 0x1: SSH密码暴力破解 hydra -l root ...
- SQLChop、SQLWall(Druid)、PHP Syntax Parser Analysis
catalog . introduction . sqlchop sourcecode analysis . SQLWall(Druid) . PHP Syntax Parser . SQL Pars ...
- AngularJs ngCsp、ngFocus、ngBlur、ngForm
ngCsp 处理CSP(上下文安全策略)的支持. 当开发如google浏览器的扩展时候这个就必须使用. CSP禁止应用程序使用eval和Function(string)生成的函数.如果我们需要兼容,我 ...
- 【Beta版本】冲刺-Day5
队伍:606notconnected 会议时间:12月13日 目录 一.行与思 二.站立式会议图片 三.燃尽图 四.代码Check-in 一.行与思 张斯巍(433) 今日进展:继续修改界面及图标设计 ...
- iOS - 类簇
类簇是在Objective-C中Foundation Framework中广泛使用的一种设计模式 1.发现类簇(Class Cluster)的踪迹 //*> 执行下面代码 id obj1 = [ ...
- static静态变量的理解
静态变量 类型说明符是static.静态变量属于静态存储方式,其存储空间为内存中的静态数据区(在 静态存储区内分配存储单元),该区域中的数据在整个程序的运行期间一直占用这些存储空间(在程序整个运行期间 ...
- 真机调试之android手机+chrome
真机调试之android手机+chrome 虽然chrome上的移动设备模拟器很强大,但是在真机运行的时候,总会遇到一些小问题,这时就需要使用真机调试了. 第一步:准备一台android手机,并在手机 ...