横屏竖屏处理

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

 

使用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中定义对应的样式，这样就可以实现在不同的屏幕模式下显示不同的样式。如下代码示例：

  
      
          
              
              
              
              
          
          
            
  
                内容  
            
  
              
          
      

转载于:https://www.cnblogs.com/Catherine001/p/7308543.html