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 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
JQuery 弹出框定位实现方法
Dec 02 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
Vue指令指令大全
Feb 09 Javascript
在NPM发布自己造的轮子的方法步骤
Mar 09 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 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在字符串中查找另一个字符串
2008/11/19 PHP
php5.3中连接sqlserver2000的两种方法(com与ODBC)
2012/12/29 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
PHP中header用法小结
2016/05/23 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
关于vue-router路径计算问题
2017/05/10 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
python3使用GUI统计代码量
2019/09/18 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
用python计算文件的MD5值
2020/12/23 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
法律进企业活动方案
2014/03/04 职场文书
债务授权委托书范本
2014/10/17 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
python实现商品进销存管理系统
2022/05/30 Python