js 的时间的横竖屏事件
来源:互联网 发布:贴图软件 编辑:程序博客网 时间:2024/05/20 05:05
检测方式
1.利用orientationChange事件
2.借助 media queries
1.利用orientationChange事件
这个事件是苹果公司为safari中添加的。以便开发人员能够确定用户何时将设备由横向查看切换为纵向查看模式。
在设备旋转的时候,会触发这个事件:
// Listen for orientation changeswindow.addEventListener("orientationchange", function() {// Announce the new orientation numberalert(window.orientation);}, false);
- 1
- 2
- 3
- 4
- 5
只要用户改变了设备的查看模式,就会触发 orientationChange事件。此时的event对象不包含任何有价值的信息:
orientation属性
它有三个值:0,90,-900为竖屏模式(portrait),-90意味着该设备横向旋转到右侧的横屏模式(landscape),而90表示该设备是横向旋转到左边的横屏模式(landscape)。还有一个是180,表示竖屏但是是翻转过来的竖屏模式。但这种模式至今尚未得到支持。
因此,结合这个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,竖屏//加上portraitdocument.body.parentNode.setAttribute('class',orientation);};// 每次旋转,调用这个事件。window.addEventListener('orientationchange',updateOrientation,false);// 事件的初始化updateOrientation();};window.addEventListener('DOMContentLoaded',init,false);})();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
因此可以根据不同的旋转状态加上class,所以我们的css就可以这样写了:
/**竖屏 body显示红色**/.portrait body div{background: red;}/**横屏 body显示蓝色**/.landscape body div{background: blue;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
2.借助 media queries
@media all and (orientation: portrait) {body div {background: red;} }@media all and (orientation: landscape) { body div {background: blue; } }
- 1
- 2
- 3
- 4
- 5
- 6
注意:
这个orientation media query 在ios3.2+和安卓2.0+上还有其他浏览器上有效。
相对来说,这种代码更加的简洁一点。跟上面的js+css,这种代码是纯css。当设备旋转的时候,就会根据设备旋转的方向来调用改方向的css
3.兼容性
有些设备并没有提供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);})();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
这样,我们就可以在浏览器中看到屏幕旋转带来样式的变化了。
4.两种检测方法的结合
(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);})();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
利用这个方法,就可以解决掉烦人的移动端设备横竖屏的检测了。
0 0
- js 的时间的横竖屏事件
- 简短的js判断手机横竖屏
- js实现手机横竖屏事件
- js实现手机横竖屏事件
- iPad、iphone 横竖屏的切换事件 两个View切换
- js 判断横竖屏切换,获取宽高的问题
- cocos2d-js h5横竖屏切换的一种实现方案
- 视频的横竖屏
- 横竖屏的生命周期
- 横竖屏的切换
- iPad Android系统下,平板设备判断横竖屏,以及横竖屏变化之后的事件触发(html + javascript)
- iPad Android系统下,平板设备判断横竖屏,以及横竖屏变化之后的事件触发(html + javascript)
- 横竖屏切换事件
- android 横竖屏事件
- JS横竖屏检测
- qt的横竖屏转换
- Android横竖屏的问题
- zxing 横竖屏的问题
- java利用SHA1withRSA进行签名与验签
- 差点被坑死,Fragment onAttach方法没有被调用
- 16 - 11 - 23 得分 - UVA 1585 --《算法竞赛入门经典》
- ”选择”的一点思考
- linux常用命令--find
- js 的时间的横竖屏事件
- iOS 开发 多线程详解之GCD基本概念
- 反射的引出和概念
- linux命令之 cut awk sed grep 篇
- Javascript DAY2
- activiti的流程实例的活动id
- LeetCode 417. Pacific Atlantic Water Flow 题解
- 64位win10下安装xgboost python包的教程
- 趣味程序 - 分数类与矩阵类的实现