JavaScript를 사용하여 브라우저 뷰포트 크기를 어떻게 얻을 수 있습니까?

브라우저 뷰포트 크기 감지

문제:

JavaScript를 사용하여 브라우저의 뷰포트 크기를 어떻게 확인할 수 있습니까? 이 정보는 사용 가능한 디스플레이 영역을 기반으로 이미지 품질을 최적화하는 데 특히 유용합니다.

해결책:

브라우저 뷰포트 크기를 얻는 방법에는 여러 가지가 있습니다.

크로스 브라우저: @media(너비) 및 @media(높이) 값

let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);

window.innerWidth 및 window.innerHeight

속성:

• 스크롤 막대를 포함한 CSS 뷰포트 크기를 검색합니다
• 초기 규모로 인해 모바일 기기에서는 불안정할 수 있습니다. 및 확대/축소

document.documentElement.clientWidth 및 .clientHeight

속성:

• CSS 뷰포트 너비 - 스크롤바 너비
• @media 크기와 일치(없음) 스크롤바
• 크로스 브라우저 지원
• doctype 없이는 부정확함

자원:

• [다양한 라이브 출력 차원](https://jsfiddle.net/ariya/tvn3d/)
• [Verge](https://github.com/ryanseddon/verge)
• [actual.js]( https://github.com/jsdom/actual)

위 내용은 JavaScript를 사용하여 브라우저 뷰포트 크기를 어떻게 얻을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!