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判断手机横竖屏的更多相关文章
- JS判断手机横竖屏
在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 屏幕方向对应的window.orientat ...
- js 判断手机横竖屏的实现方法(不依赖任何其他库)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- CSS3(@media)判断手机横竖屏
@media all and (orientation : landscape) { h2{color:red;}/*横屏时字体红色*/ } @media all and (orientation : ...
- H5 手机横竖屏判读
$.fn.screenCheck = function() { var pDiv = $('<div></div>'); pDiv.addClass("screenC ...
- Javascript 判断网页横竖屏
本篇文章由:http://xinpure.com/javascript-to-determine-page-anyway-screen/ Html5 流行至今,自适应的网站已经多如牛毛,但是横竖屏的切 ...
- javascript判断iphone/android手机横竖屏模式的函数
function orientationChange(){ switch(window.orientation) { case 0: // Portrait case 180: // Upside-d ...
- js和css实现手机横竖屏预览思路整理
实现效果,如上图. 首先,实现手机页面在PC端预览, 则先在网上找到一个手机的背景图片,算好大概内间距,用来放预览的页面,我这里是给手机预览页面的尺寸按iphone5的尺寸来的: 一个手机页面在这里预 ...
- js判断手机浏览器是横屏or竖屏
移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 从而根据实际需求而执行相应的程序.通过添加监听事件onorientationc ...
- iphone手机不同版本兼容、横竖屏
/* 兼容问题*/ @media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pix ...
随机推荐
- Hide a Subpage Using PeopleCode
There was a question asked on the forum on how to hid a subpage. There is no Peoplecode function to ...
- 微信Api
//定义变量 HttpRequest Request; HttpResponse Response; HttpServerUtility Server; HttpContext Context; pr ...
- 【转】8种Nosql数据库系统对比
导读:Kristóf Kovács 是一位软件架构师和咨询顾问,他最近发布了一片对比各种类型nosql数据库的文章.文章由敏捷翻译 – 唐尤华编译.如需转载,请参见文后声明. 虽然SQL数据库是非常有 ...
- Ajax的get请求向服务器请求数据五步骤?
如下: ①创建ajax对象 ②建立http请求 ③发送http请求 ④设置ajax对象状态改变的回调函数 ⑤判断ajax状态是否等于4,做相应的业务逻辑
- 重拾C,一天一点点_12
连续两天没写了,今天继续! sizeof 对象 或 sizeof (类型名) 返回一个整型值,等于指定对象或类型占用的存储空间字节数.(返回值是无符号整型值,其类型为size_t,在头文件<st ...
- Adapter的getView方法详解
来自:http://blog.csdn.net/yelbosh/article/details/7831812 BaseAdapter就Android应用程序中经常用到的基础数据适配器,它的主要用途是 ...
- ajax向前台输出二维数组 并解析
最近在弄一个售后数据统计的功能,里边需要统计特定时期内各种客户.机型的分布比例,单单table来计算并显示很死板(一点也不酷) 于是决定用jquery插件flot并通过ajax传输数据 :flot的折 ...
- Flask Web Development —— Web表单(上)
Flask-WTF扩展使得处理web表单能获得更愉快的体验.该扩展是一个封装了与框架无关的WTForms包的Flask集成. Flask-WTF和它的依赖集可以通过pip来安装: (venv) $ p ...
- USB设备驱动
在Linux 内核中,使用usb_driver 结构体描述一个USB 设备驱动,usb_driver 结构体的定义如代码清单20.11 所示.代码清单20.11 usb_driver 结构体 stru ...
- C++经典书籍推荐
<C++程序设计语言> <C++语言设计与演化> <C++标准程序库> <EFFECTIVE C++ 中文版> <MORE EFFECTIVE C ...