大佬教程收集整理的这篇文章主要介绍了iPad Android系统下，平板设备判断横竖屏，以及横竖屏变化之后的事件触发（html + javascript），大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
闭月羞花猫： 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
一个完整的例子：
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <Meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <title> 横竖屏测试网页 </title> <script type="text/javascript"> // 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() { var ua = navigator.userAgent; var deviCEType=""; //判断设备类型 if (ua.indexOf("iPad") > 0) { deviCEType = "isIpad"; } else if (ua.indexOf("Android") > 0) { deviCEType = "isAndroid"; } else { alert("既不是ipad，也不是安卓！"); return; } // 判断横竖屏 if ("isIpad" == deviCETypE) { if (Math.abs(window.orientation) == 90) { alert("我是ipad的横屏"); } else { alert("我是ipad的竖屏"); } } else if ("isAndroid" == deviCEType ) { if (Math.abs(window.orientation) != 90) { alert("我是安卓的横屏"); } else { alert("我是安卓的竖屏"); } } },falsE); </script> </head> <body> 横竖屏测试网页 </body> </html>
以上是大佬教程为你收集整理的iPad Android系统下，平板设备判断横竖屏，以及横竖屏变化之后的事件触发（html + javascript）全部内容，希望文章能够帮你解决iPad Android系统下，平板设备判断横竖屏，以及横竖屏变化之后的事件触发（html + javascript）所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。