Mobile Web开发基础————处理设备的横竖屏
文章来自:http://blessdyb.iteye.com/blog/1537076
为了应对移动设备屏幕的碎片化，我们在开发Mobile Web应用时，一个最佳实践就是采用流式布局，保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性，用户在切换了屏幕的方向后，有些设计上或实现上的问题就会凸显——我们至少需要处理一下当前显示元素的宽度的适配（当然，要做的可能不仅仅是这个）。很多时候，我们需要为不同的屏幕方向来设计对应的应用显示模式，这个时候，实时地获知设备的模竖屏状态就显得极为重要。
?
window.orientation属性与onorientationchange事件 ???
window.orientation<!Doctype html><html><head> <meta charset="utf-8"> <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;"> <title>横竖屏切换检测</title> <style type="text/css"> body[orient=landscape]{ background-color: #ff0000; } body[orient=portrait]{ background-color: #00ffff; } </style></head><body orient="landspace"><div>内容</div><script type="text/javascript"> (function(){ if(window.orient==0){ document.body.setAttribute("orient","portrait"); }else{ document.body.setAttribute("orient","landscape"); } })(); window.onorientationchange=function(){ var body=document.body; var viewport=document.getElementById("viewport"); if(body.getAttribute("orient")=="landscape"){ body.setAttribute("orient","portrait"); }else{ body.setAttribute("orient","landscape"); } }; </script></body></html>
?2.类似的思路，不通过CSS的属性选择器来实现，如下代码的实现方案：
<!Doctype html><html><head> <meta charset="utf-8"> <meta id="viewport" name="viewport" 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></head><body orient="landspace"><div>内容</div><script type="text/javascript"> (function(){ var init=function(){ var updateOrientation=function(){ var orientation=window.orientation; switch(orientation){ case 90: case -90: orientation="landscape"; break; default: orientation="portrait"; break; } document.body.parentNode.setAttribute("class",orientation); }; window.addEventListener("orientationchange",updateOrientation,false); updateOrientation(); }; window.addEventListener("DOMContentLoaded",init,false); })(); </script></body></html>?3.使用media query方式
<!Doctype html><html><head> <meta charset="utf-8"> <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;"> <title>横竖屏切换检测</title> <style type="text/css"> @media all and (orientation : landscape) { body { background-color: #ff0000; } } @media all and (orientation : portrait){ body { background-color: #00ff00; } } </style></head><body><div>内容</div></body></html>?4.低版本浏览器的平稳降级
如果目标移动浏览器不支持media query，同时window.orientation也不存在，则我们需要采用另外一种方式来实现————使用定时器“伪实时”地对比当前窗口的高(window.innerHeight)与宽(window.innerWidth)之比，从而判定当前的横竖屏状态。如下代码所示：
?
<!Doctype html><html><head> <meta charset="utf-8"> <meta id="viewport" name="viewport" 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 updateOrientation=function(){ var orientation=(window.innerWidth > window.innerHeight)? "landscape" : "portrait"; document.body.parentNode.setAttribute("class",orientation); }; var init=function(){ updateOrientation(); window.setInterval(updateOrientation,5000); }; window.addEventListener("DOMContentLoaded",init,false); })(); </script></head><body><div>内容</div></body></html>?5.统一解决方案
将以上的两种解决方案整合在一起，就可以实现一个跨浏览器的解决方案，如下代码：
<!Doctype html><html><head> <meta charset="utf-8"> <meta id="viewport" name="viewport" 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>?
?