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. [leetcode]_Unique Paths

    题目:有一个m * n 的方格,如下图,一个小robot希望从左上角走到右下角,共有多少种不同的路线走法. 思路: 我的错误思路:全排列,从(0,0)走到(m - 1,n - 1)共需要往下走m-1步 ...

  2. html中的框架

    1.总的代码 <frameset rows=20%,*> <frame src="top.html" /> <frameset cols=30%,*& ...

  3. lua进阶(二)

    第五章 函数 函数有两种用途:1.完成指定的任务,这种情况下函数作为调用语句使用:2.计算并    返回值,这种情况下函数作为赋值语句的表达式使用. function function_name( . ...

  4. Python核心编程--学习笔记--6--序列(上)字符串

    本章研究Python中的序列:字符串.列表和元组.因为这些类型其实都是由一些成员共同组成的一个序列整体,所以我们把它们统称为序列.序列的存储结构可以表示为: 1 序列 序列类型有着相同的访问模式:按下 ...

  5. SQLAlchemy连接数据库并在django admin显示

    SQLAlchemy 0.7     postgersql  9.0 SQLAlchemy连接数据库有两种方法,一种是classic,一种是modern 1,modern方法 from sqlalch ...

  6. jruby中的异常

    先看看ruby中的异常知识: 异常处理raise 例子: raise raise "you lose" raise SyntaxError.new("invalid sy ...

  7. Telerik XML 数据源绑定的问题

    Telerik GridView 默认的 XElement 数据源的直接绑定,会导致内置的sort, filter ,group等功能无法使用. 原因在于Telerik GridView的那些功能是根 ...

  8. 老工程升级到VS2010或以上时会出现 libc.lib 解决方法

    有些网上的工程都比较老,比如用2003之类.一般会有个静态libc.lib.在新版本里已经没有这个库,被微软无情的抛弃. 编译时会出现动态库找不到: 1>LINK : fatal error L ...

  9. EMVTag系列7《静态签名数据》

    Ø 5F24    应用有效期 L: 3 -M(必备) 1)  芯片中的应用失效日期5F24,服务码5F30,必须与芯片中的二磁道等效数据(Tag57)中的失效日期和服务码一致. 2)  qPBOC ...

  10. linux内核设计与实现学习笔记-模块

    模块 1.概念:  如果让LINUX Kernel单独运行在一个保护区域,那么LINUX Kernel就成为了“单内核”.    LINUX Kernel是组件模式的,所谓组件模式是指:LINUX K ...