在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. PullToRefreshListView调用onRefreshComplete方法 无法取消刷新的bug

    我们在使用框架:   PullToRefreshListView 实现下拉或者上拉加载时候,可能在上拉 完成时候,调用onRefreshComplete方法去 停止 刷新操作,但是,可能无效,测试产生 ...

  2. HDU 4901(杭电多校训练#3 1005题)The Romantic Hero(DP)

    题目地址:HDU 4901 这题没想到最后竟然可以做出来.. .. 这题用了两次DP,先从前往后求一次异或的.再从后往前求一次与运算的. 各自是 1:求异或的时候,定义二维数组huo[1000][10 ...

  3. 为Android GridView 设置行背景

    经常有这样的需求,你的功能图标要像一个个物品,摆放在书架上,像这样: 我的思路比较简单,重载GridView,在他绘制子视图前,先把背景绘制完成 1 2 3 4 5 6 7 8 9 10 11 12 ...

  4. Qt 学习之路 2(80):定位器

    QML 提供了很多用于定位的元素.这些元素叫做定位器,都包含在 QtQuick 模块.这些定位器主要有 Row.Column.Grid和Flow等. 为了介绍定位器,我们先添加三个简单的组件用于演示: ...

  5. 使用Partitioner实现输出到多个文件

    1.需求 按学生的年龄段,将数据输出到不同的文件.这里我们分为三个年龄段:小于等于20岁.大于20岁小于等于50岁和大于50岁 2.实现 1.编写Partitioner,代码如下 public sta ...

  6. Android 实现闹钟功能

      原文地址:Android 实现闹钟功能作者:Android_Learners 一.手机闹钟主要用到了AlarmManager类,AlarmManager类提供了访问系统定时服务的途径,开发人员可以 ...

  7. Weex 初始

    1.一旦数据和模板绑定,数据的变化会立即体现在前台的变化 <template> <container> <text style="font-size: {{si ...

  8. Git CMD - pull: Fetch from and integrate with another repository or a local branch

    命令格式 git pull [options] [<repository> [<refspec>…​]] 命令参数 -q, --quiet 安静模式. -v, --verbos ...

  9. Android中Cursor类的概念和用法

    http://blog.sina.com.cn/s/blog_618199e60101fskp.html 使用过 SQLite数据库的童鞋对 Cursor 应该不陌生,加深自己和大家对Android ...

  10. c-八进制 转 十进制

    概述 其实x进制转十进制的算法都差不多,不过如果是针对于字符形式,他们却有点不同.使用指针和数组的形式计算,又不同.这里演示将字符型的数组形式的八进制转成十进制: #include <stdio ...