<!Doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0;"> <title>横竖屏切换检测</title> <style type="text/css"> .landscape body { background-color: #ff0000; } .portrait body { background-color: #00ffff; } </style> <script type="text/javascript"> (function(){ var supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object"); var updateOrientation=function(){ if(supportOrientation){ updateOrientation=function(){ var orientation=window.orientation; switch(orientation){ case 90: case -90: orientation="landscape"; break; default: orientation="portrait"; } document.body.parentNode.setAttribute("class",orientation); }; }else{ updateOrientation=function(){ var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait"; document.body.parentNode.setAttribute("class",orientation); }; } updateOrientation(); }; var init=function(){ updateOrientation(); if(supportOrientation){ window.addEventListener("orientationchange",updateOrientation,false); }else{ window.setInterval(updateOrientation,5000); } }; window.addEventListener("DOMContentLoaded",init,false); })(); </script> </head> <body> <div> 内容 </div> </body> </html>
以上所述是小编给大家介绍的Mobile Web开发基础之四--处理手机设备的横竖屏问题，希望对大家有所帮助！
您可能感兴趣的文章: