JS 및 CSS는 모바일 장치 방향의 변화 감지 및 가로 및 세로 화면 판단을 구현합니다_javascript 기술

방법 1: 이벤트를 사용하여 휴대폰의 가로 화면과 세로 화면 간 전환을 트리거합니다.

코드 복사 코드는 다음과 같습니다.

window.addEventListener("orientationchange", function() {

// 새로운 방향의 가치를 알리다

경고(window.orientation);

}, 거짓);

방법 2: 크기 조정 변경 모니터링

코드 복사 코드는 다음과 같습니다.

window.addEventListener("resize", function() {

// 화면 크기 가져오기(내부/외부 너비, 내부/외부 높이)

}, 거짓);

css는 화면이 가로인지 세로인지 결정합니다

코드 복사 코드는 다음과 같습니다.

/* 초상화 */

@미디어 화면 및 (방향:세로) {

/* 인물별 스타일 */

}

/* 풍경 */

@미디어 화면 및 (방향:가로) {

/* 풍경별 스타일 */

}

네이티브 window.matchMedia 메소드를 사용하면 실시간 미디어 쿼리가 가능합니다. 위의 미디어 쿼리를 사용하여 우리가 수직 뷰인지 수평 뷰인지 확인할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var mql = window.matchMedia("(방향: 세로)");

// 일치하는 항목이 있으면 세로 보기

if(mql.matches) {

//직립 방향

경고("1")

} else {

//가로방향

경고("2")

}

//미디어 쿼리 변경 리스너 추가

mql.addListener(함수(m) {

if(m.matches) {

//세운 방향으로 변경

document.getElementById("test").innerHTML="세운 방향으로 변경";

}

그밖에 {

document.getElementById("test").innerHTML="가로 방향으로 변경";

//가로 방향으로 변경

}

});