這篇文章將為大家詳細(xì)講解有關(guān)HTML5中怎么判斷橫屏豎屏，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

10年的雙峰網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。營銷型網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整雙峰建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“雙峰網(wǎng)站設(shè)計(jì)”,“雙峰網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

一：CSS判斷橫屏豎屏

寫在同一個CSS中

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. @media screen and (orientation: portrait) {   

2.   /*豎屏 css*/   

3. }    

4. @media screen and (orientation: landscape) {   

5.   /*橫屏 css*/   

6. }  

分開寫在2個CSS中

豎屏

XML/HTML Code復(fù)制內(nèi)容到剪貼板

橫屏

XML/HTML Code復(fù)制內(nèi)容到剪貼板

二：JS判斷橫屏豎屏

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. //判斷手機(jī)橫豎屏狀態(tài)：   

2. window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {   

3.         if (window.orientation === 180 || window.orientation === 0) {    

4.             alert('豎屏狀態(tài)！');   

5.         }    

6.         if (window.orientation === 90 || window.orientation === -90 ){    

7.             alert('橫屏狀態(tài)！');   

8.         }     

9.     }, false);   

//移動端的瀏覽器一般都支持window.orientation這個參數(shù)，通過這個參數(shù)可以判斷出手機(jī)是處在橫屏還是豎屏狀態(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é)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。