HTML5实战与剖析之判断移动端横屏竖屏功能

　在手机端经常游走的我们很多时候都会对横屏和竖屏的概念比较熟悉，大家都经常头疼怎么才能判断这横屏和竖屏的状态呢，今儿梦龙就为大家分享分享。

 

　　用CSS判断横屏竖屏问题。CSS代码如下

 

 

[plain] view plain copy
 
  1.  1、  
  2.  @media (orientation: portrait) { } 横屏  
  3.  @media (orientation: landscape) { }竖屏  
  4.    
  5.  2、  
  6.  <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">横屏  
  7.  <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">竖屏  



 

　　用JavaScript判断横屏竖屏问题。JavaScript代码如下

 

 

[javascript] view plain copy
 
  1. //判断手机横竖屏状态：  
  2. function hengshuping(){  
  3.   if(window.orientation==180||window.orientation==0){  
  4.         alert("竖屏状态！")         
  5.    }  
  6. if(window.orientation==90||window.orientation==-90){  
  7.         alert("横屏状态！")          
  8.     }  
  9.  }  
  10. window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);  
  11.   
  12. //移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。  
  13. 从而根据实际需求而执行相应的程序。通过添加监听事件onorientationchange，进行执行就可以了。  

 

 

　　以上便是HTML5实战与剖析之判断移动端横屏竖屏功能的介绍，大家以后再遇到这样的需求的时候还是会比较方便的拿来就能用了。

posted @ 2017-11-04 10:01  五艺  阅读(226)  评论(0)  编辑  收藏  举报