在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. Debian自启动知识 2015-03-31 20:23 79人阅读 评论(0) 收藏

    Debian6添加了insserv用来代替update-rc.d.update-rc.d 就不多做介绍. Debian6里边要添加一个自动启动的服务需要先将启动脚本放在/etc/init.d,然后使用 ...

  2. [io PWA] Great libraries and tools for great Progressive Web Apps

    sw-toolbox: Github It provides a cononical implementation of all the runtime caching strategies that ...

  3. hadoop资料汇总(网上)

    http://blog.csdn.net/fansy1990/article/list/3      全部是hadoop的,挺好. http://stackoverflow.com/          ...

  4. XML解析技术研究(一)

      摘要:XML作为过去十年中出现的最流行的技术之一,得到了广泛的应用,而其中XML解析技术是XML应用的关键.本文介绍了XML解析技术的研究动向,分析和比较了4种XML解析技术的优劣,并归纳总结了应 ...

  5. Dapper Use For Net

    Dapper.Net by example januari 6, 2012 When the team behind StackOverflow released the mini-ORM Dappe ...

  6. Android开发:最详细的 NavigationDrawer 开发实践总结

    最详细的 NavigationDrawer 开发实践总结 继前面写的两篇文章之后(有问题欢迎反馈哦): Android开发:Translucent System Bar 的最佳实践 Android开发 ...

  7. java中for循环的6种写法

    有些写法上的说明写的过于武断,可能有很多不当之处,仅供参考.   package ForLoop; import java.util.ArrayList; import java.util.Itera ...

  8. PHP 解决未定义变量报错

    在PHP中 有时候会出现 Notice: Undefined index: sid in D:\Apache Group\Apache2\htdocs\php_mobile\mobile\chao\s ...

  9. android入门系列- TextView EditText Button ImageView 的简单应用

    第一篇原创,其实自己就是一菜鸟,简单分享点基本知识吧.希望能有所帮助吧. TextView EditText Button ImageView 这几个控件可能是Android开发中最常用.最基本的几个 ...

  10. log4Net配置详解

    <?xml version="1.0" encoding="utf-8" ?> <configuration> <configSe ...