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 ...
随机推荐
- [leetcode]_Pascal's Triangle II
题目:Pascal三角的变形,要求只用O(K)的额外空间. 思路:由于Pascal三角中,tri[n][i] = tri[n - 1][i] + tri[n-1][i-1],(通常情况下) 如果已经获 ...
- PHP导出excel文件
现在教教你如何导入excel文件: 在我的文件储存里面有一个com文件夹的,将其解压放在ThinkPHP/Library/文件夹里面,然后就是写控制器啦!去调用这个插件: <?php names ...
- 往Android SDCard中读写入数据
一.用Environment (写) 1.API获取sdcard的路径 File path=Environment.getExternalStorageDirectory(); path=new Fi ...
- WIN10系统 Solidworks 2015 Toolbox插件提示 failed to create toolboxl ibrary object 解决方法
网上大部分都是说卸载一个更新程序,但是在WIN10中根本没有. 但是也可通过以下方法解决: 1.关闭SW程序及进程,用管理员命令打开CMD 2.打开并复制SW目录,默认为 C:\Program Fil ...
- 第五节:AppDomain FirstChance异常通知
每个AppDomain都可关联一组回调方法:CLR开始查找AppDomain中的catch块时,这些回调方法就会得到调用.这些方法可执行日志记录操作.除此之外,宿主可利用这个机制监视AppDomain ...
- 【Inno Setup】 Inno Setup 64位安装程序默认安装路径
在脚本中加入: ArchitecturesInstallIn64BitMode=x64 ArchitecturesAllowed=x64
- virtualbox cannot access the kernel driver的解决办法
一位网友windows xp sp3下安装virtualbox 4.1.20版本,安装好了重启过后,可以打开virtualbox,但是等到创建好虚拟电脑后按启动按钮,就出现了错误提示:"Ca ...
- job不自动运行解决方法
一.plsql.新建命令窗口 用查询语句: show parameter job_queue_processes 看看job_queue_processes的值 如果你的job很多那么将这个值设大,5 ...
- dede 忘记密码在数据库中修改方法
如何找回或修改dedecms后台管理员登录密码呢? 一个客户把密码忘了,找了很长一会没几个靠谱的回答,dede是使用md5加密,但是,它是显示32位md5加密码从第6位开始的20位 方法是直接修改其m ...
- libmemcached upcoming ISO C++ standard, C++0x
在编译我的小程序的时候,触发了一个编译错误,程序中使用了libmemcached,错误如下: 1 2 3 4 5 6 7 8 9 In file included from /usr/lib/gcc/ ...