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

這篇文章將為大家詳細講解有關(guān)移動端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. //判斷手機橫豎屏狀態(tài)：   
   window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {   
           if (window.orientation === 180 || window.orientation === 0) {    
               alert('豎屏狀態(tài)！');   
           }    
           if (window.orientation === 90 || window.orientation === -90 ){    
               alert('橫屏狀態(tài)！');   
           }     
       }, false);

//移動端的瀏覽器一般都支持window.orientation這個參數(shù)，通過這個參數(shù)可以判斷出手機是處在橫屏還是豎屏狀態(tài)。

屏幕方向?qū)?yīng)的window.orientation值：

ipad,iphone： 90 或 -90 橫屏
ipad,iphone： 0 或180 豎屏
Andriod：0 或180 橫屏
Andriod： 90 或 -90 豎屏

關(guān)于移動端HTML5中判斷橫屏豎屏的方法是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。