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中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
Rust中的Struct使用示例详解
Aug 14 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
星际争霸兵种名称对照表
2020/03/04 星际争霸
优化PHP程序的方法小结
2012/02/23 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
php文件缓存方法总结
2016/03/16 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
简单了解python中对象的取反运算符
2019/07/01 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
美国创意之家:BulbHead
2017/07/12 全球购物
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
高校学生干部的自我评价分享
2013/11/04 职场文书
零件设计自荐信范文
2013/11/27 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
2015年材料员工作总结
2015/04/30 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
golang在GRPC中设置client的超时时间
2021/04/27 Golang
浅谈JS的原型和原型链
2021/06/04 Javascript
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
vue+echarts实现多条折线图
2022/03/21 Vue.js