在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到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. Modbus协议学习笔记

    之前也有写过基于 Modbus 通讯协议的控制远程监控程序,但是由于当时时间赶.人手少(软硬件前后台都是在下一人

  2. vue父子组件通信(prop)

    先定义子组件,注册prop接收父组件传递的值 <template> <div> <div>{{message}}(子组件)</div> </div ...

  3. robotframe 学习笔记1

    在robot framework中,通过 Set variable关键字来定义变量 连接对象: 通过Catenate关键字可以连接多个信息 加上"SEPARATOR=",可以对多个 ...

  4. tomcat入门(一)几种常见的使用tomcat部署项目的方式

    1.常规方式部署 直接把web项目复制到tomcat安装目录下的%Tomcat_Home%/webapps/{web项目} 2.使用控制台进行部署 若一个web应用结构为D:\workspace\We ...

  5. Kudu版本升级(官网推荐的步骤)(Upgrade from a Previous Version of Kudu)

    不多说,直接上干货! http://kudu.apache.org/docs/installation.html#sles_from_source

  6. ubuntu下安装录屏软件

    sudo add-apt-repository ppa:maarten-baert/simplescreenrecorder sudo apt-get update sudo apt-get inst ...

  7. 测试阿里云1核2g轻量级服务器的吞吐量

    使用jmeter对部署的dbshop发起请求,单线程5000次请求 面板为宝塔界面 吞吐量大概在每秒48个请求左右.可以看出阿里云1核2g服务器其实并不能进行实战,只是新手练手而已. 阿里云另一种ec ...

  8. 使用cookie的注意事项

    一.什么是cookie? Cookie(复数形态Cookies),中文名称为小型文本文件或小甜饼[1],指某些网站为了辨别用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密) ...

  9. Js获取移动设备分辨率

    在<head>中引入  <meta name="viewport" content="width=device-width, initial-scale ...

  10. tck/tl 以及expect脚本

    最近有用到,利用expcet脚本自动登录到远程服务器并提权执行脚本. 搜集的知识如下: tcl/tk参考——列表操作lindex expect脚本解释 代码如下 #!/usr/bin/expect - ...