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 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
7个jQuery最佳实践
Jan 12 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
es6函数之严格模式用法实例分析
Mar 17 Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 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中Date获取时间不正确怎么办
2008/06/05 PHP
PHP 进程锁定问题分析研究
2009/11/24 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
微信access_token的获取开发示例
2015/04/16 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
Vue基础配置讲解
2019/11/29 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
Win8下python3.5.1安装教程
2020/07/29 Python
python opencv调用笔记本摄像头
2019/08/28 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
幼师自我鉴定范文
2013/10/01 职场文书
仓库管理制度
2014/01/21 职场文书
个人自荐材料
2014/05/23 职场文书
学习党章的体会
2014/11/07 职场文书
高三英语复习计划
2015/01/19 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
未中标通知书
2015/04/17 职场文书
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python