移動端HTML5中判斷橫屏豎屏的方法

在行動端我們常常碰到橫屏豎屏的問題，那麼我們該如何去判斷或是針對橫屏、豎屏來寫不同的代碼呢。本文主要介紹了HTML5中判斷橫屏豎屏的方法(移動端)的相關資料,需要的朋友可以參考下，希望能幫助到大家。

這裡有兩種方法：

#一：CSS判斷橫屏垂直螢幕

#寫在同一個CSS中

1. @media screen and (orientation: portrait) {   
     /*竖屏 css*/   
   }    
   @media screen and (orientation: landscape) {   
     /*横屏 css*/   
   }

分開寫在2個CSS中

垂直螢幕

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

橫向螢幕

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

二：JS判斷橫向螢幕垂直螢幕

1. //判断手机横竖屏状态：   
   window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {   
           if (window.orientation === 180 || window.orientation === 0) {    
               alert('竖屏状态！');   
           }    
           if (window.orientation === 90 || window.orientation === -90 ){    
               alert('横屏状态！');   
           }     
       }, false);

//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

螢幕方向對應的window.orientation值：

##ipad,iphone： 90 或-90 橫屏

ipad,iphone： 0 或180 垂直螢幕
Andriod： 0 或180 橫屏
Andriod： 90 或-90 豎屏

相關推薦：

##HTML5實戰與剖析之判斷移動端橫屏垂直螢幕功能

基於jQuery的判斷iPad、iPhone、Android是橫屏還是垂直螢幕的程式碼_jquery

頁面強制橫屏

以上是移動端HTML5中判斷橫屏豎屏的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！