在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。

屏幕方向对应的window.orientation值:

ipad或iPhone: 90 或 -90 横屏
ipad或iPhone: 0 或180 竖屏
Andriod:0 或180 横屏
Andriod: 90 或 -90 竖屏

使用 jQuery 判断iPad、iPhone、Android是横屏还是竖屏的方法

function direction() {
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(){
direction();
});
//用户变化屏幕方向时调用
$(window).on( 'orientationchange', function(e){
direction();
});

JS判断手机横竖屏的更多相关文章

  1. js 判断手机横竖屏的实现方法(不依赖任何其他库)

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. zepto判断手机横竖屏

    var CheckOrientation = (function(){ var win = $( window ), get_orientation, last_orientation, initia ...

  3. CSS3(@media)判断手机横竖屏

    @media all and (orientation : landscape) { h2{color:red;}/*横屏时字体红色*/ } @media all and (orientation : ...

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

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

  5. js判断手机 横屏模式

    js判断手机 横屏模式 方法名称:orientation 实例: if(window.orientation!=0){ var obj=document.getElementById('orienta ...

  6. js判断手机浏览器操作系统和微信浏览器的方法

    做手机端的前端开发,少不了对手机平台的判断.如,对于app下载,就要判断在Android平台下就显示Android下载提示:在iOS平台下就显示iOS下载提示. 今天就为大家介绍一下用js判断手机客户 ...

  7. H5 手机横竖屏判读

    $.fn.screenCheck = function() { var pDiv = $('<div></div>'); pDiv.addClass("screenC ...

  8. js判断手机的横竖屏调整样式

    在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢.首先需要在head中加入如下代码: <meta name="viewport" content= ...

  9. Javascript 判断网页横竖屏

    本篇文章由:http://xinpure.com/javascript-to-determine-page-anyway-screen/ Html5 流行至今,自适应的网站已经多如牛毛,但是横竖屏的切 ...

随机推荐

  1. linux及hadoop基本操作

    cd 命令:切换目录 () 切换到目录“/usr/local” ) 切换到当前目录的上一级目录   ) 切换到当前登录 Linux 系统的用户的自己的主文件夹    ls 命令:查看文件与目录   ...

  2. Python3 PIL Image 操作文件后导致占用问题

    需求:按图片分辨率范围分类图片(每个商品有N张图片在一个目录内). 实现:用PIL Image打开图片并读取宽度和高度.然后按不同分辨率存档到不同目录. 问题:从原有目录移动到目标目录时出现 “Per ...

  3. STL effectiv 条款7 复习 未完成

    该条款很好的解决了  容器中存放指针释放的问题,for_each函数调用可以参考自己的前面的博客 为什么会有这个条款呢 很多时候 我们将new过的指针存放到容器中,我们有时候错误的认为  容器对象析构 ...

  4. java高级篇

    Method对象可以得到任何一个类的任何方法的定义(只需要传入方法的名字和参数即可) class Ming { private void speak() { System.out.println(&q ...

  5. Linux小知识(1): bash中执行数据库的相关操作

    工作中经常会遇到命令行操作数据库或登陆至其他服务器等情况,往往需要通过命令行进入相关的数据库或登陆至相关的服务器,再执行指令操作,因此有没有方法,在命令行或bash脚本中模拟进入数据库或登陆服务器操作 ...

  6. jqGrid方法整理

    一.colModel 表体结构配置 name 必要的属性,具有唯一标识性,如在弹出的editform窗体中,将作为input的name属性 index        为排序用,最方便的是设为数据库字段 ...

  7. iOS 状态栏设置为白色

    1.首先需要再info.plist中添加一项View controller-based status bar appearance为no 2.在需要的地方添加代码 [[UIApplication sh ...

  8. Cookie概述

    一.什么叫Cookie? Cookie翻译成中文是小甜点,小饼干,在Http中它表示服务器送给客户端浏览器的小甜点.其实Cookie就是一个键和一个值构成,随着服务器端的响应发送给客户端浏览器,然后客 ...

  9. CDSN博客第一天

    CDSN博客第一天 今天是CSDN写博客的第一天. 2017/2/11 13:05:45

  10. div的浮动(float)

    什么是浮动 浮动,故名思议,就是移动位置. 之所以不叫移动,而叫浮动,那是因为给元素设置浮动后,元素会浮到文档上面来,术语叫脱离文档流. 例子 下面我们看例子 <html> <hea ...