javascript检测移动设备横竖屏
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript检测移动设备横竖屏,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3076字,纯文字阅读大概需要5分钟。
内容图文
![javascript检测移动设备横竖屏](/upload/InfoBanner/zyjiaocheng/353/c4fae3ced41949bb842b6dbcac7e89ae.jpg)
如何判断
移动设备提供了两个对象,一个属性,一个事件:
(1)window.orientation 属于window对象上一个属性;共有三个值 :0为竖屏模式(portrait),90为向左反转变为横屏模式(landscape),-90为向右反转变为横屏模式(landscape),最后180就是设备上下互换还是竖屏模式。
(2)orientationchange 是一个event,在设备旋转时,会触发此事件,如同PC上使用的resize事件。
这两个搭配起来使用,很容易就能获得设备的横竖屏状态,代码如下:
(function(){ var init = function(){ var updateOrientation = function(){ var orientation = window.orientation; switch(orientation){ case 90: case -90: orientation = 'landscape'; break; default: orientation = 'portrait'; break; } //do something //比如在html标签加一个状态 //然后根据不同状态,显示不同大小 document.body.parentNode.setAttribute('class',orientation); }; window.addEventListener('orientationchange',updateOrientation,false); updateOrientation(); }; window.addEventListener('DOMContentLoaded',init,false); })();
在css中就可以这样写:
/**竖屏 div边框显示蓝色**/ .portrait body div{ border:1px solid blue; } /**竖屏 div边框显示黄色**/ .landscape body div{ border:1px solid yellow; }
当然还可以使用media queries的方式(推荐这种):
@media all and (orientation: portrait) { body div { border:1px solid blue; } } @media all and (orientation: landscape) { body div { border:1px solid yellow; } }
兼容性
如果window.orientation或者orientationchange在设备中不存在的情况怎么处理呢?(一般一个不存在,另一个也不存在,反之)
在前期开发中,经常会用Chrome的device model调式,但是这个属性确实不存在,哪怎么获得这个值呢?简单的方式就是依据宽和高的大小比较判断,宽小于高为竖屏,宽大与高就是横屏。
获得结果的方式知道了,接下来就是怎么监听设备反转事件了,既然orientationchange不可用,就使用最基本的resize事件或者使用定时器检测,还是看代码:
(function(){ var updateOrientation = function(){ var orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait'; document.body.parentNode.setAttribute('class',orientation); }; var init = function(){ updateOrientation(); //每5秒检查一次 //window.setInterval(updateOrientation,5000); //监听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); })();
总结
通过orientationchange事件来监听设备是否旋转,配合window.orientation属性判断当前是横屏还是竖屏,以便执行不同的操作。
内容总结
以上是互联网集市为您收集整理的javascript检测移动设备横竖屏全部内容,希望文章能够帮你解决javascript检测移动设备横竖屏所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。