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. Java----代码优化篇

    一.咱们之所以这么干的目的: 1.效率(最重要) 2.可读性,便于后期维护.(同样很重要) 二.代码优化的要求: 1.减小代码的体积. 2.提高代码的运行效率. 三.常用的代码的优化: 1.尽量重用对 ...

  2. tomcat学习笔记1

    tomcat是一个开源软件,是由java语言编写的,它工作的话需要运行在jvm虚拟机中,说到jvm不得不说下java这个大名鼎鼎的编程 语言了 java这个编程语言最优秀的特点要数write once ...

  3. recurse_array_change_key_case()递规返回字符串键名全为小写或大写的数组

    //递归返回字符串键名全为小写或大写的数组function recurse_array_change_key_case(&$input, $case = CASE_LOWER){    if( ...

  4. IT新人论成长

    说自己是新人,其实自己也不新了,2012年毕业,辗转3个城市,现在在上海一家公司,工资不到5K. 在来现在公司之前,我从事web后台开发,采用MVC模式,虽然做了不少的网站,但感觉自己的水平还是在底层 ...

  5. 在一般处理程序中,把Form Post过来的表单集合转换成对象 ,仿 MVC post,反射原理

    using System; using System.Collections.Generic; using System.Collections.Specialized; using System.L ...

  6. NuGet 的使用

     install-package entityframework//Enable-Migrations -ContextTypeName College.Models.CollegeEntities  ...

  7. C#中virtual和abstract的区别

    先说区别: virtual意思是虚拟,abstract意思是抽象. virtual只修饰方法,abstract修饰方法和类. virtual方法必须有实现,abstract方法必须没有实现. publ ...

  8. Python学习教程(learning Python)--2 Python简单函数设计

    本节讨论Python程序设计时为何引入函数? 为何大家都反对用一堆堆的单个函数语句完成一项程序的设计任务呢? 用一条条的语句去完成某项程序设计时,冗长.不宜理解,不宜复用,而采用按功能模块划分成函数, ...

  9. java-脚本-编译-注解

    有注解没注解生成字节码一样 ,只对处理它的工具有用通过注解接口定义@interface 元注解(4个)@Target ANNOTATION_TYPE/PACKAGE/TYPE/METHOD/CONST ...

  10. 刀哥多线程现操作gcd-10-delay

    延迟操作 // MARK: - 延迟执行 - (void)delay { /** 从现在开始,经过多少纳秒,由"队列"调度异步执行 block 中的代码 参数 1. when 从现 ...