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. SQL中查看数据库各表的大小

    SQL中查看数据库各表的大小 编写人:CC阿爸 2014-6-17 在日常SQL数据库的操作中,如何快速的查询数据库中各表中数据的大小. 以下有两种方法供参考: 第一种: create table # ...

  2. Java编程性能优化

    1尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时间,提高加载的效率,但并不是所有地方都适用于单例,简单来说,单例主要适用于以下三个方面: 第一,控制资源的使用,通过线程同步来控制资 ...

  3. 关于js一般对象与标配对象

    当一个js函数对象被创建时,Function 构造器产生的函数对象会运行类似这样的一些代码 this.prototype={constructor:this} 新函数被赋予了一个prototype属性 ...

  4. Flex 4.0及4.6发布的网络应用在内网内会访问很慢的解决方案

    Flex 4.x 开发的程序部署在外网在能访问到www.adobe.com的时能够很快加载完成,但是部署在本地局域网,不能访问外网的服务器上,用浏览器访问应用需要加载几分钟的时间,这种等待时间客户几乎 ...

  5. 苹果Mac OS系统shell命令大全介绍

    基本命令 1.列出文件 ls 参数 目录名        例: 看看驱动目录下有什么:ls /System/Library/Extensions 参数 -w 显示中文,-l 详细信息, -a 包括隐藏 ...

  6. 写一个函数,尽可能高效的,从一个标准 url 里取出文件的扩展名

    例如: http://www.sina.com.cn/abc/de/fg.php?id=1 需要取出 php 或 .php function getExt($url){ $arr=parse_url( ...

  7. delphi函数调用约定

    指令 参数存放位置 参数传递顺序 参数内存管理 使用地方 Register CPU寄存器 从左到右 被调用者 默认,published属性存取方法必须使用 Pascal 栈 从左到右 被调用者 向后兼 ...

  8. android JSON 技术

    json 语法检查和在线解析网址:http://json.parser.online.fr/ limengwe android Json解析详解(详细代码) http://blog.csdn.net/ ...

  9. WCF中使用控件的委托,线程中的UI委托

    UI界面: <Window x:Class="InheritDemo.Window1" xmlns="http://schemas.microsoft.com/wi ...

  10. SQLite数据库管理的相关命令

    1.创建数据库 启动命令行,通过输入如下命令打开Shell模式的CLP: sqlite3 test.db 虽然我们提供了数据库名称,但如果该数据库不存在,SQLite实际上就未创建该数据库,直到在数据 ...