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

브라우저 뷰포트의 크기를 얻는 방법

배경:

브라우저 표시 콘텐츠 "뷰포트"라고 알려진 지정된 영역 내에서. 이 영역에는 주소 표시줄, 도구 모음 및 기타 UI 요소가 제외됩니다. 특정 시나리오에서 개발자는 사용자에게 최적의 보기 환경을 제공하기 위해 뷰포트의 정확한 크기를 결정해야 할 수도 있습니다.

해결책:

JavaScript를 사용하여 브라우저 뷰포트 크기:

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

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

2. window.innerWidth 및 window.innerHeight:

이러한 속성은 스크롤 막대를 포함하여 CSS 뷰포트의 너비와 높이를 직접 반환합니다. 단, 이 값은 크기 조정 문제로 인해 모바일 장치에서 다를 수 있습니다.

3. document.documentElement.clientWidth 및 .clientHeight:

이러한 속성은 스크롤 막대 너비를 제외한 뷰포트의 너비와 높이를 계산합니다. 스크롤 막대가 없으면 @media 값과 일치합니다.

추가 정보:

• 위에 설명된 방법은 브라우저 간 호환되며 널리 지원됩니다.
• 다양한 뷰포트의 실시간 출력을 테스트하기 위한 리소스를 온라인에서 사용할 수 있습니다.
• "verge" 및 "actual"과 같은 타사 라이브러리는 원하는 측정 단위로 정확한 뷰포트 크기를 얻기 위한 편리한 추상화를 제공합니다.

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