這篇文章將為大家詳細講解有關(guān)移動端HTML5中判斷橫屏豎屏的方法是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

五河網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)自2013年創(chuàng)立以來到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

這里有兩種方法：

一：CSS判斷橫屏豎屏

寫在同一個CSS中

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

分開寫在2個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é)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。