判斷橫屏豎屏（三種）
更新時間：2017年02月13日 16:09:20 作者：mmm(⊙o⊙)
本文主要介紹了通過HTML，CSS，JS三種判斷橫屏豎屏的方法。具有很好的參考價值，下面跟著小編一起來看下吧
在做移動端頁面的時候經(jīng)常會遇到需要判斷橫屏還是豎屏。下面將目前已知的通過HTML，CSS，JS三種判斷方法記錄下來，方便以后翻閱。
1、通過在html中分別引用橫屏和豎屏的樣式：
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow" > //引用豎屏的CSS <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" rel="external nofollow" > //引用橫屏的CSS
2、CSS中通過媒體查詢的方法來判斷：
@media (orientation: portrait ){
//豎屏CSS
}
@media ( orientation: landscape ){
//橫屏CSS
}
3、js判斷是否為橫屏豎屏:
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);
只要用戶改變了設(shè)備的查看模式，就會觸發(fā)onorientationchange事件。
orientation有4個值：0,90，-90,180
值為0和180的時候為豎屏（180為倒過來的豎屏）；
90和-90時為橫屏（-90為倒過來的豎屏模式）；
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
List Installed Hot Fixes...2007-06-06
uniapp自定義網(wǎng)絡(luò)檢測組件項目實戰(zhàn)總結(jié)分析
這篇文章主要為大家介紹了uniapp自定義網(wǎng)絡(luò)檢測組件項目實戰(zhàn)總結(jié)分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
javascript實現(xiàn)全角轉(zhuǎn)半角的方法
這篇文章主要介紹了javascript實現(xiàn)全角轉(zhuǎn)半角的方法,涉及JavaScript字符串遍歷與編碼轉(zhuǎn)換的相關(guān)技巧,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)監(jiān)聽頁面滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
學(xué)習(xí)強大的JavaScript一行代碼，能夠節(jié)省你的時間和代碼量，所以本文為大家整理了25個JavaScript實用代碼技巧，感興趣的小伙伴可以了解一下2023-07-07
這篇文章主要介紹了微信小程序事件綁定基本語法示例詳解,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2025-04-04
這篇文章主要介紹了js拖拽一些常見的思路方法,需要的朋友可以參考下2014-03-03
一文詳解JavaScript?如何將?HTML?轉(zhuǎn)成?Markdown
這篇文章主要介紹了一文詳解JavaScript如何將HTML轉(zhuǎn)成Markdown，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
下面小編就為大家?guī)硪黄东@未處理的Promise錯誤方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
JavaScript中的定時器大家基本在平時的開發(fā)中都遇見過吧，但是又有多少人去深入的理解其中的原理呢？本文我們就來分析一下定時器的實現(xiàn)原理、定時器的妙用、定時器使用注意事項，有興趣的朋友可以看下2016-12-12