使用JS和css實現(xiàn)檢測移動設備方向的變化并判斷橫豎屏幕

2024-03-17    分類： 網(wǎng)站建設

方法一：用觸發(fā)手機的橫屏和豎屏之間的切換的事件 復制代碼 代碼如下:

window.addEventListener("orientationchange", function() { // 宣布新方向的數(shù)值

alert(window.orientation);

}, false); 方法二：監(jiān)聽調(diào)整大小的改變 復制代碼 代碼如下:

window.addEventListener("resize", function() { // 得到屏幕尺寸 (內(nèi)部/外部寬度，內(nèi)部/外部高度)

}, false);

css判斷橫豎屏幕 復制代碼 代碼如下:

/* portrait */ @media screen and (orientation:portrait) {

/* portrait-specific styles */

}

/* landscape */

@media screen and (orientation:landscape) {

/* landscape-specific styles */

} 本地window.matchMedia方法允許實時媒體查詢。我們可以利用以上媒體查詢找到我們是處于直立或水平視角： 復制代碼 代碼如下:

var mql = window.matchMedia("(orientation: portrait)"); // 如果有匹配，則我們處于垂直視角

if(mql.matches) {

// 直立方向

alert("1")

} else {

//水平方向

alert("2")

}

// 添加一個媒體查詢改變監(jiān)聽者

mql.addListener(function(m) {

if(m.matches) {

// 改變到直立方向

document.getElementById("test").innerHTML="改變到直立方向";

}

else {

document.getElementById("test").innerHTML="改變到水平方向";

// 改變到水平方向

}

}); 本文來源于成都網(wǎng)站建設公司與成都網(wǎng)站設計制作公司-創(chuàng)新互聯(lián)成都公司！

本文標題：使用JS和css實現(xiàn)檢測移動設備方向的變化并判斷橫豎屏幕
轉(zhuǎn)載源于：http://www.muchs.cn/news44/320494.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、搜索引擎優(yōu)化、全網(wǎng)營銷推廣、手機網(wǎng)站建設、網(wǎng)站設計公司、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都app開發(fā)公司