溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在做移動端頁面的時候經常會遇到需要判斷橫屏還是豎屏。下面將目前已知的通過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('豎屏狀態！');
}
if (window.orientation === 90 || window.orientation === -90 ){
alert('橫屏狀態！');
}
}, false);
只要用戶改變了設備的查看模式，就會觸發onorientationchange事件。
orientation有4個值：0,90，-90,180
值為0和180的時候為豎屏（180為倒過來的豎屏）；
90和-90時為橫屏（-90為倒過來的豎屏模式）；
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
