·您当前的位置:首页 > 技术教程 > JavaScript >

[JS]js代码判断移动终端ios苹果安卓平板设备横竖屏的情况代码实

时间:2015-02-28 12:31酷播
[JS]js代码判断移动终端ios苹果安卓平板设备横竖屏的情况代码实例

[JS]js代码判断移动终端ios苹果安卓平板设备横竖屏的情况代码实例

闭月羞花猫: 2012年1月于 河西新城科技园

酷播跨平台演示PC终端、安卓Android终端、苹果iOS终端、Windows Phone终端等主流终端

平板开发中,经常需要用到设备判断横屏竖屏,以及屏幕发生横竖变化时候所触发的一些事件。

基本上使用下面的js就可以了。

  1. <script> 
  2.  
  3. // Detect whether device supports orientationchange event, otherwise fall back to 
  4. // the resize event. 
  5.  
  6. var supportsOrientationChange = "onorientationchange" in window, 
  7.     orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; 
  8.  
  9. window.addEventListener(orientationEvent, function() { 
  10.     alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation); 
  11. }, false); 
  12. </script> 

无论是ipad还是安卓:

可以在function里面实装切换后的事件,比如横竖屏不同,画面的布局设计,css使用不同等等。

※你可以使用window.orientation来判断切换之后到底是横屏还是竖屏。

但是: 关于上面的代码,有几项是需要注意的。

1, window.orientation

     经过测试,在ipad,和andriod系统上面,window.orientation来判断横竖屏用得值正好相反。

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

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器