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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
Jan 23 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
解决JS表单验证只有第一个IF起作用的问题
Dec 04 Javascript
前端开发基础javaScript的六大作用
Aug 06 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
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
js left,right,mid函数
2008/06/10 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
2010/01/22 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
[00:16]热血竞技场
2019/03/06 DOTA
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
Python 功能和特点(新手必学)
2015/12/30 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
基于python的字节编译详解
2017/09/20 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
2013年入党人员的自我鉴定
2013/10/25 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
幼儿园辞职书
2015/02/26 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python