横屏竖屏处理

首先，横竖屏状态是无法用程序控制的，但是可以判断进而处理：

使用window.orientation

原理：打开页面是通过window.orientation判断网页是横屏还是竖屏，如果是竖屏，给整个页面添加旋转90°样式。用户看到横屏效果后，旋转手机会触发window.orientationchange事件，然后将页面旋转回原来的0°。

屏幕方向对应的window.orientation值：

ipad： 90 或 -90 横屏

ipad： 0 或180 竖屏

Andriod：0 或180 横屏

Andriod： 90 或 -90 竖屏

参考链接：http://www.cnblogs.com/guangxiaoluo/p/3897366.html（html屏幕旋转事件监听--老骆）

具体做法：

1、使用onorientationchange事件的回调函数，来动态地为body标签添加一个叫orient的属性，同时以body[orient=landspace]或body[orient=portrait]的方式在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">  
                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>