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

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

时间:2015-02-28 12:31酷播
一个完整的例子: !DOCTYPEhtml html head meta charset = utf-8 meta content = text/html;charset=UTF-8 http-equiv = Content-Type title CuPlayer.com横竖屏测试网页 / title script type = text/javascript //

一个完整的例子:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> 
  6. <title>CuPlayer.com横竖屏测试网页 </title> 
  7. <script type="text/javascript"> 
  8.  
  9. // Detect whether device supports orientationchange event, otherwise fall back to 
  10. // the resize event. 
  11. var supportsOrientationChange = "onorientationchange" in window, 
  12.     orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; 
  13.  
  14. // CuPlayer.com提示:监听事件 
  15. window.addEventListener(orientationEvent, function() { 
  16.     var ua = navigator.userAgent; 
  17.     var deviceType=""
  18.  
  19.     //CuPlayer.com提示:判断设备类型  
  20.  
  21.     if (ua.indexOf("iPad") > 0) { 
  22.        deviceType = "isIpad"
  23.     } else if (ua.indexOf("Android") > 0) { 
  24.        deviceType = "isAndroid"
  25.     } else { 
  26.        alert("CuPlayer.com提示:既不是ipad,也不是安卓!"); 
  27.        return; 
  28.     } 
  29.     
  30.  
  31.      // CuPlayer.com提示:判断横竖屏  
  32.  
  33.      if ("isIpad" == deviceType) { 
  34.        if (Math.abs(window.orientation) == 90) { 
  35.            alert("我是ipad的横屏"); 
  36.        } else { 
  37.            alert("我是ipad的竖屏"); 
  38.        } 
  39.     } else if ("isAndroid" == deviceType ) { 
  40.        if (Math.abs(window.orientation) != 90) { 
  41.            alert("CuPlayer.com提示:我是安卓的横屏"); 
  42.        } else { 
  43.            alert("CuPlayer.com提示:我是安卓的竖屏"); 
  44.        } 
  45.     } 
  46. }, false); 
  47. </script> 
  48. </head> 
  49. <body> 
  50. CuPlayer.com提示:横竖屏测试网页 
  51. </body> 
  52. </html>   

 

热门文章推荐

请稍候...

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

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