判斷橫屏豎屏（三種）
更新時間：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的時候?yàn)樨Q屏（180為倒過來的豎屏）；
90和-90時為橫屏（-90為倒過來的豎屏模式）；
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
JS聲明式函數(shù)與賦值式函數(shù)實(shí)例分析
這篇文章主要介紹了JS聲明式函數(shù)與賦值式函數(shù),結(jié)合實(shí)例形式分析了JS函數(shù)解析的流程與執(zhí)行順序,需要的朋友可以參考下2016-12-12
微信小程序?qū)崿F(xiàn)根據(jù)字母選擇城市功能
這篇文章主要為大家詳細(xì)介紹了微信小程序中根據(jù)字母選擇城市的相關(guān)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
JS調(diào)用頁面表格導(dǎo)出excel示例代碼
這篇文章主要介紹了JS調(diào)用頁面表格導(dǎo)出excel的具體實(shí)現(xiàn),需要的朋友可以參考下2014-03-03
JavaScript 隱式類型轉(zhuǎn)換規(guī)則詳解
這篇文章主要為大家介紹了JavaScript 隱式類型轉(zhuǎn)換規(guī)則詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2023-05-05
JavaScript 2048 游戲?qū)嵗a(簡單易懂)
使用javascript制作的2048小游戲非常好玩，有意思，下面給大家分享使用javascript代碼制作的2048游戲，需要的朋友參考下吧2016-03-03
layui表格內(nèi)放置圖片,并點(diǎn)擊放大的實(shí)例
今天小編就為大家分享一篇layui表格內(nèi)放置圖片,并點(diǎn)擊放大的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
由document.body和document.documentElement想到的
不知道大家對這個標(biāo)題有沒有想法，反正此前我一直把他們混為了一談。其實(shí)不然，首先需有個“標(biāo)準(zhǔn)”的概念。2009-04-04
ionic js 模型 $ionicModal 可以遮住用戶主界面的內(nèi)容框
這篇文章主要介紹了ionic js 模型 $ionicModal 可以遮住用戶主界面的內(nèi)容框的相關(guān)資料,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了詳解require.js配置路徑的用法和css的引入,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
深入剖析JavaScript中的函數(shù)currying柯里化
下面小編就為大家?guī)硪黄钊肫饰鯦avaScript中的函數(shù)currying柯里化。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-04-04