[JS]js代码判断移动终端ios苹果安卓平板设备横竖屏的情况代码实
[JS]js代码判断移动终端ios苹果安卓平板设备横竖屏的情况代码实例
闭月羞花猫: 2012年1月于 河西新城科技园
平板开发中,经常需要用到设备判断横屏竖屏,以及屏幕发生横竖变化时候所触发的一些事件。
基本上使用下面的js就可以了。
- <script>
- // Detect whether device supports orientationchange event, otherwise fall back to
- // the resize event.
- var supportsOrientationChange = "onorientationchange" in window,
- orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
- window.addEventListener(orientationEvent, function() {
- alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation);
- }, false);
- </script>
无论是ipad还是安卓:
可以在function里面实装切换后的事件,比如横竖屏不同,画面的布局设计,css使用不同等等。
※你可以使用window.orientation来判断切换之后到底是横屏还是竖屏。
但是: 关于上面的代码,有几项是需要注意的。
1, window.orientation
经过测试,在ipad,和andriod系统上面,window.orientation来判断横竖屏用得值正好相反。
window.orientation值 | 横竖屏结果 | |
---|---|---|
ipad | 90或者-90 | 横屏 |
ipad | 0 或者180 | 竖屏 |
Andriod | 0 或者180 | 横屏 |
Andriod | 90或者-90 | 竖屏 |
2,如何判断自己的设备是ipad还是安卓
一个土办法: 从 navigator.userAgent 里面截取字符串。
具体参照:
http://stackoverflow.com/questions/1649086/detect-rotation-of-android-phone-in-the-browser-with-javascript
热门文章推荐
- [JS]window.location获取url各项参数详解
- [JS]jQuery,javascript获得网页的高度和宽度
- [JS]视频弹窗视频弹出层videoLightBox(含三种播放器的用法)
- [JS]JS提交中文encodeURI两次转码
- [JS]js版方面encodeURI转码和decodeURI解码的用法实例
- [JS]js取当前机子的时间戳实例
- [JS]AES加密(基于crypto-js)PHP后端解密
- [JS]data:image/png;base64写法的用途及说明