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