在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到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. 对称加密中的ECB模式&CBC模式

    ECB模式: CBC模式: 所有的迭代模式:

  2. my14_mysql指定时间恢复之模拟从库

    场景 *********************************线上库数据误删除,存在几天前的一份全备数据,现需要恢复这些误删除的数据本例方案:在另外一台服务器上,恢复全备,搭建binlog ...

  3. Yii2 urles

    public function rules(){ return [ //必须填写 ['email, username, password,agree,verifyPassword,verifyCode ...

  4. ubuntu 常用安装软件

    1. Ubuntu安装chrome. sudo apt-get install chromium-browser w

  5. Microsoft使用技巧

    1.拍摄屏幕内容的截图 按 Win + Shift + S 以打开截图栏,然后将光标拖动到要捕获的区域. 截图区域将保存到剪贴板. 2.使用键盘添加表情符号 随心随处表达自我. 按 Ctrl + Sh ...

  6. 笔记本Win8 换Win7 设置 BIOS

    去年买了台笔记本,笔记本自带win8系统,想安装Win7折腾了好久都没有安装成功 后来在BIOS中找到了一个uefi/legacy boot项,将原来的uefi only 修改为legacy only ...

  7. GO WEB

    1.第一个坑的就是,错误信息如下: 比较常见的错误“Connection reset by peer”,该错误和“Connection reset”是有区别的: 服务器返回了“RST”时,如果此时客户 ...

  8. 3dsmax 卸载/安装失败/出错 2019/2018/2017/2016/2015/2013/2012

    AUTO Uninstaller 更新下载地址 1.选择3dsmax 2.选择版本 3.点击“开始卸载”

  9. C# 反射 Type.GetFields 方法

    using System.Collections; using System.Collections.Generic; using UnityEngine; using System.Reflecti ...

  10. [转]jQuery插件写法总结以及面向对象方式写法

    本文转自:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented ...