宜昌本地软件开发与弱电工程服务商
项目咨询 · 快速响应
您当前的位置: > 个人博客 > javascript

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

2016-10-13 00:16:48 点击量:53 标签: 收藏本文

[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

ABOUT US
宜昌农人网络科技有限公司

我们是一家提供综合软件外包与弱电工程服务的技术公司。

业务涵盖定制软件、管理系统、网站、小程序、APP、系统集成、网络布线、监控安防、门禁、机房建设及长期技术维护。

公司地址:湖北省宜昌市伍家岗区东站二路6号三峡(宜昌)大数据产业园海洋馆二楼A203室