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判断手机横竖屏的更多相关文章

  1. JS判断手机横竖屏

    在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 屏幕方向对应的window.orientat ...

  2. js 判断手机横竖屏的实现方法(不依赖任何其他库)

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. CSS3(@media)判断手机横竖屏

    @media all and (orientation : landscape) { h2{color:red;}/*横屏时字体红色*/ } @media all and (orientation : ...

  4. H5 手机横竖屏判读

    $.fn.screenCheck = function() { var pDiv = $('<div></div>'); pDiv.addClass("screenC ...

  5. Javascript 判断网页横竖屏

    本篇文章由:http://xinpure.com/javascript-to-determine-page-anyway-screen/ Html5 流行至今,自适应的网站已经多如牛毛,但是横竖屏的切 ...

  6. javascript判断iphone/android手机横竖屏模式的函数

    function orientationChange(){ switch(window.orientation) { case 0: // Portrait case 180: // Upside-d ...

  7. js和css实现手机横竖屏预览思路整理

    实现效果,如上图. 首先,实现手机页面在PC端预览, 则先在网上找到一个手机的背景图片,算好大概内间距,用来放预览的页面,我这里是给手机预览页面的尺寸按iphone5的尺寸来的: 一个手机页面在这里预 ...

  8. js判断手机浏览器是横屏or竖屏

    移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 从而根据实际需求而执行相应的程序.通过添加监听事件onorientationc ...

  9. iphone手机不同版本兼容、横竖屏

    /* 兼容问题*/ @media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pix ...

随机推荐

  1. Case When Exists SQL

    The Case-When-Exists expression in Oracle is really handy. Here's an example of how to use it in a s ...

  2. Entity Framework with NOLOCK

    在SqlServer中,频繁在同一个数据库表同时进行读写的时候,会存在锁的问题,也就是在前一个insert.update.delete事务操作完毕之前,你不能进行读取,必须要等到操作完毕,你才能进行s ...

  3. PHP实习生面经--两天四面

    这两天一共面了四家公司,之前投了很多还在想怎么没有叫面试的,后来接连来了四个.下面一个一个做个总结. 1.创想空间(www.quanshi.com) 在五环边上的软件园里,占了一个楼的大概一层吧,算是 ...

  4. onActivityResult无法调用

    最新项目中使用到了Fragment.在fragment中重载了onActivityResult方法,始终无法调用到. 大体是这样:选择图片的功能纠结了很久,能正常发送选择图片,但是选择后无法调用到on ...

  5. Delphi 7 里没有加载的控件

    在原来版本如D5.D6中使用的控件如Quickrep,FastNet等,在D7中仍然是保留的.只是Delphi没有将他们默认的安装到组件面版中来.这些控件包全部保存在Delphi目录的bin下,文件扩 ...

  6. C# 判断是否为闰年的条件各是

    //try 没增加异常数据处理 Console.WriteLine("根据输入的信息计算当年某个月份的天数,以及当年是否是闰年或平年,\n并判断2月份特殊月份的天数."); Con ...

  7. 第七节:使用实现了dispose模式的类型

    知道类型如何实现dispose模式之后,接下来看一下开发人员怎样使用提供了dispose模式的类型.这里不再讨论前面的SafeHandle类,而是讨论更常用的FileStream类. 可以利用File ...

  8. kettle过滤、生成随机数、改变开始复制数量

    下面是一个用Kettle实现数据过滤.生成随机数.改变开始复制数量的连贯示意图. 首先,我们将控件一一建立,通过hop建立连接 下面对每一个控件进行设置 1.生成随机数控件(随机取一个数字与字符串) ...

  9. Oracle redo 日志切换时间频率

    DB: 11.2.0.3.0 查看Oracle的redo日志切换频率 两条SQL,原理是一样的,第二个用到了统计函数 时间单位:分钟 方法一. select * from v$log a where ...

  10. [转]Squid中的日志出现TCP_CLIENT_REFRESH_MISS的问题排除

    转自:http://www.php-oa.com/2008/07/15/tcp_client_refresh_miss.html 今天检查Squid发现大量的日志出现TCP_CLIENT_REFRES ...