js 이동 단 가로 세로 스크린 인터페이스 검 측 실현 을 판단 하 는 몇 가지 방법

1.서로 다른 시각의 획득 방법

//         （       ）
let iw = window.innerWidth,
 ih = window.innerHeight;
console.log(iw, ih);

//         （      ，     、              ）
let ow = window.outerWidth,
 oh = window.outerHeight;
console.log(ow, oh);

//           ，   （       ）
let sw = window.screen.width,
 sh = window.screen.height;
console.log(sw, sh);

//             （     、         、      ）
let aw = window.screen.availWidth,
 ah = window.screen.availHeight;
console.log(aw, ah);

//      、   、      
let dow = document.documentElement.offsetWidth,
 doh = document.documentElement.offsetHeight;
console.log(dow, doh);

//                                
let dsW = document.documentElement.scrollWidth,
 dsH = document.documentElement.scrollHeight;
console.log(dsW, dsH);

//         ，      、          
let cw = document.documentElement.clientWidth,
 ch = document.documentElement.clientHeight;
console.log(cw, ch);

2.JavaScript 검 측 가로 세로 화면

// window.orientation：        
window.addEventListener('resize', () => {
 //          180 
 if (window.orientation === 180 || window.orientation === 0) {
  console.log('  ')
 }

 //        90         90 
 if (window.orientation === 90 || window.orientation === -90) {
  console.log('  ')
 }
});

3.CSS 검 측 가로 세로 화면

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

 /*    */
 #app {
  width: 100vw;
  height: 100vh;
  background: red;
 }
}

@media screen and (orientation:landscape) {

 /*    */
 #app {
  width: 50vw;
  height: 100vh;
  background: green;
 }
}

4.meta 태그 속성 설정

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

5.meta 태그 속성 설정 설정 앞머리&밑 에 작은 검 은 줄

<meta name="viewport" content="viewport-fit=cover" />

안전 구역 과 경계 거 리 를 설정 합 니 다.

/*            ，         padding ： */
body {
 padding-bottom: constant(safe-area-inset-bottom);
 padding-bottom: env(safe-area-inset-bottom);
}

주:constant 함 수 는 iOS<11.2 시,env 는 iOS>=11.2 시 에 유효 합 니 다.
여기 서 js 판단 모 바 일 가로 세로 화면 인터페이스 검 측 실현 에 관 한 몇 가지 방법 에 관 한 글 을 소개 합 니 다.더 많은 관련 js 모 바 일 가로 화면 인터페이스 검 측 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!