在ipad、iphone网页开发中,我们很可能需要判断是横屏或者竖屏。下面就来介绍如何用 jQuery 判断iPad、iPhone、Android是横屏还是竖屏的方法。

代码如下:

function orient() {
if (window.orientation == 90 || window.orientation == -90) {
//ipad、iphone竖屏;Andriod横屏
$("body").attr("class", "landscape");
orientation = 'landscape';
return false;
}
else if (window.orientation == 0 || window.orientation == 180) {
//ipad、iphone横屏;Andriod竖屏
$("body").attr("class", "portrait");
orientation = 'portrait';
return false;
}
}
//页面加载时调用
$(function(){
orient();
});
//用户变化屏幕方向时调用
$(window).bind( 'orientationchange', function(e){
orient();
});

 

屏幕方向对应的window.orientation值

ipad: 90 或 -90 横屏

ipad: 0 或180 竖屏

Andriod:0 或180 横屏

Andriod: 90 或 -90 竖屏

有次我针对PC版限制了JS缩放的最小尺寸,PC版最小到980像素宽。

但是ipad竖向是属于768以上,要判断要么大于920,要么它是移动设备,于是我查到这个属性,如果该值为真:

if(_maxWidth>920||window.orientation == 90 || window.orientation == -90||window.orientation == 0 || window.orientation == 180){
$("#banner").css({"width": _maxWidth+"px","height":_maxHeight+"px"});
}

效果是正确的。在PC版上屏蔽了图片920像素一下的缩放。ipad正常。

JQuery 判断IPad、IPhone、Android是横屏还是竖屏(Window.Orientation实现)的更多相关文章

  1. 基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码

    在ipad.iphone网页开发中,我们很可能需要判断是横屏或者竖屏.下面就来介绍如何用 jQuery 判断iPad.iPhone.Android是横屏还是竖屏的方法 其实主要是通过window.or ...

  2. [JS代码]如何判断ipad或者iphone是否为横屏或者竖屏 - portrait或者landscape

    //判断横屏或者竖屏 function orient() { //alert('gete'); if (window.orientation == 0 || window.orientation == ...

  3. Android 设置横屏或竖屏

    方法一:在AndroidManifest.xml中配置 如果不想让软件在横竖屏之间切换,最简单的办法就是在项目的AndroidManifest.xml中找到你所指定的activity中加上androi ...

  4. android界面横屏和竖屏的切换

    关于android横屏和竖屏的切换网上给了很多种.但是有些介绍的方法都是在android旧版本上. 我现在把握用到的情况写下来用于备忘: android 版本:4.0 - 4.4 要求:android ...

  5. android设置横屏和竖屏的方法

    方法一:在AndroidManifest.xml中配置 假设不想让软件在横竖屏之间切换,最简单的办法就是在项目的AndroidManifest.xml中找到你所指定的activity中加上androi ...

  6. 基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏

    function orient() {if (window.orientation == 90 || window.orientation == -90) {//ipad.iphone竖屏:Andri ...

  7. 如何切换android的横屏与竖屏?

    选中需要切换的模拟器,按住CTRL+F11或者CTRL+F12即可进行切换.

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

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

  9. 使用JavaScript判断手机是处于横屏还是竖屏

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

随机推荐

  1. Web classPath

    classpath,看名字,类路径,这样比如,对于java程序,就是告诉java程序哪里去找类.(java虚拟机都是通过类装载器的)想myeclipse中struts,spring,hibernate ...

  2. 利用systemtap学习Linux路由代码

    http://bbs.chinaunix.net/thread-4090162-1-1.html 一.为什么要这样做读kernel route子系统代码,当我弄懂了数据结构之间的关系以及控制流程后,心 ...

  3. 关于jsp web项目中的javax.servlet.ServletException: java.lang.NoClassDefFoundError: javax/el/ELResolver错误

    错误: javax.servlet.ServletException: java.lang.NoClassDefFoundError: javax/el/ELResolver org.apache.j ...

  4. PHP中的function函数详解

    PHP函数,在PHP中函数起到一个不可分割的重要部分,很多功能实现都要用到函数,PHP的最大的威力就来源于函数! 在PHP中内建函数至少有上千个函数.这些内建函数了解就行了,官方文档里面有函数大全:传 ...

  5. plsql 显式游标

    显式游标的处理过程包括: 声明游标,打开游标,检索游标,关闭游标. 声明游标 CURSOR c_cursor_name IS statement; 游标相当于一个查询结果集,将查询的结果放在游标里,方 ...

  6. mysql修改root密码的方法

    方法1: 用SET PASSWORD命令 首先登录MySQL. 格式:mysql> set password for 用户名@localhost = password('新密码'); 例子:my ...

  7. 认识k_BackingField【转】

    事情从Json的序列化和反序列化说起. 在C#2.0的项目中,以前经常使用Json.Net实现序列化和反序列化.后来从c#3.0中开始使用新增的DataContractJsonSerializer进行 ...

  8. Express难点解析

    app.js 应用程序入口文件1.// view engine setup 设置视图引擎app.set('views', path.join(__dirname, 'views'));//告诉expr ...

  9. Xcode升后插件失效

    Xcode升后插件失效,与添加插件不小心点击Skip Bundle解决办法 字数267 阅读4731 评论1 喜欢12 今天升级了xcode到6.4 发现之前装的插件不能使用了.这里有一个解决的方案: ...

  10. http错误代码含义大全详解

    http 错误代码表 所有 HTTP 状态代码及其定义.  代码  指示  2xx  成功  200  正常:请求已完成.  201  正常:紧接 POST 命令.  202  正常:已接受用于处理, ...