브라우저 뷰포트 크기 감지
문제:
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!