JS检测移动端横竖屏的代码


Posted in Javascript onMay 30, 2016

使用media来判断屏幕宽度遇到的问题:

ios上当我旋转屏幕的时候可行,但是安卓机上没反应,横屏显示的还是我竖屏的样式。

查了一下资料,css3的media如果要在移动端有较好的显示效果,需要在页头加上这段代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

可是这段代码我不能用。因为我的页面是做了适配的。可以根据屏幕的大小来显示字号和样式的大小。如果我加了这段代码的话,我的适配就不能用了。所以要用其他方法

解决办法:

移动端的设备提供了一个事件:orientationChange事件

这个事件是苹果公司为safari中添加的。以便开发人员能够确定用户何时将设备由横向查看切换为纵向查看模式。

在设备旋转的时候,会触发这个事件,

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
// Announce the new orientation number
alert(window.orientation);
}, false);

只要用户改变了设备的查看模式,就会触发 orientationChange事件。此时的event对象不包含任何有价值的信息,

因为唯一相关信息可以通过window.orientation访问到

orientation属性

它有三个值:0,90,-90

0为竖屏模式(portrait),-90意味着该设备横向旋转到右侧的横屏模式(landscape),而90表示该设备是横向旋转到左边的横屏模式(landscape)。

还有一个是180,表示竖屏但是是翻转过来的竖屏模式。但这种模式至今尚未得到支持。

如图所示:

JS检测移动端横竖屏的代码

因此,结合这个orientationChange事件和window的orientation属性,我们就比较好判断设备是处于横屏还是竖屏了

(function(){
var init = function(){
var updateOrientation = function(){
var orientation = window.orientation;
switch(orientation){
case 90:
case -90:
orientation = 'landscape'; //这里是横屏
break;
default:
orientation = 'portrait'; //这里是竖屏
break;
}
//html根据不同的旋转状态,加上不同的class,横屏加上landscape,竖屏
//加上portrait
document.body.parentNode.setAttribute('class',orientation);
};
// 每次旋转,调用这个事件。
window.addEventListener('orientationchange',updateOrientation,false);
// 事件的初始化
updateOrientation();
};
window.addEventListener('DOMContentLoaded',init,false);
})();

因此可以根据不同的旋转状态加上class,所以我们的css就可以这样写了

/**竖屏 body显示红色**/
.portrait body div{
background: red;
}
/**横屏 body显示蓝色**/
.landscape body div{
background: blue;
}

另外一种写法是,借助 media queries

@media all and (orientation: portrait) {
body div {background: red;} 
}
@media all and (orientation: landscape) { 
body div {background: blue; } 
}

这个orientation media query 在ios3.2+和安卓2.0+上还有其他浏览器上有效。

相对来说,这种代码更加的简洁一点。跟上面的js+css,这种代码是纯css。当设备旋转的时候,就会根据设备旋转的方向来调用改方向的css

兼容性

有些设备并没有提供orientationchange事件,但不触发窗口的resize事件。并且media queries也不支持的情况下,我们该怎么办呢?

可以用resize事件来判断。用innerWidth , innerHeight,可以检索得到屏幕大小。依据宽和高的大小比较判断,宽小于高为竖屏,宽大与高就是横屏。

代码如下:

(function(){
var updateOrientation = function(){
var orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';
document.body.parentNode.setAttribute('class',orientation);
};
var init = function(){
updateOrientation();
//监听resize事件
window.addEventListener('resize',updateOrientation,false);
};
window.addEventListener('DOMContentLoaded',init,false);
})();

这样,我们就可以在浏览器中看到屏幕旋转带来样式的变化了。

两种检测方法的结合,代码如下:

(function(){
var supportOrientation = (typeof window.orientation === 'number' &&
typeof window.onorientationchange === 'object');
var init = function(){
var htmlNode = document.body.parentNode,
orientation;
var updateOrientation = function(){
if(supportOrientation){
orientation = window.orientation;
switch(orientation){
case 90:
case -90:
orientation = 'landscape';
break;
default:
orientation = 'portrait';
break;
}
}else{
orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';
}
htmlNode.setAttribute('class',orientation);
};
if(supportOrientation){
window.addEventListener('orientationchange',updateOrientation,false);
}else{
//监听resize事件
window.addEventListener('resize',updateOrientation,false);
}
updateOrientation();
};
window.addEventListener('DOMContentLoaded',init,false);
})();

利用这个方法,就可以解决掉烦人的移动端设备横竖屏的检测了。

Javascript 相关文章推荐
javascript 特性检测并非浏览器检测
Jan 15 Javascript
jquery.validate使用攻略 第三部
Jul 01 Javascript
深入分析jquery解析json数据
Dec 09 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
微信小程序 详解Page中data数据操作和函数调用
Jan 12 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 Javascript
BootStrap中Tab页签切换实例代码
May 30 #Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 #Javascript
拥Bootstrap入怀——导航栏篇
May 30 #Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 #Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 #Javascript
Bootstrap编写导航栏和登陆框
May 30 #Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 #Javascript
You might like
PHP生成静态页面详解
2006/11/19 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
使用 Visual Studio Code(VSCode)搭建简单的Python+Django开发环境的方法步骤
2018/12/17 Python
Django 内置权限扩展案例详解
2019/03/04 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
竞选演讲稿范文
2013/12/28 职场文书
酒店销售主管岗位职责
2014/01/04 职场文书
应届毕业生自荐信
2015/03/04 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
2015国庆节宣传语
2015/07/14 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
排查MySQL生产环境索引没有效果
2022/04/11 MySQL