엣지 케이스를 처리하면서 JavaScript에서 브라우저 너비를 정확하게 얻으려면 어떻게 해야 합니까?

자바스크립트를 사용하여 엣지 케이스를 포함한 브라우저 너비 가져오기

자바스크립트를 사용하여 현재 브라우저 너비를 얻는 것은 간단할 수 있지만 엣지를 고려하는 것이 중요합니다. 정확한 측정을 보장하는 케이스입니다. 해결 방법을 살펴보겠습니다.

document.body.offsetWidth를 사용하여 브라우저 너비를 가져오기 위해 언급한 코드는 본문 요소의 너비가 100%로 설정된 경우 실패할 수 있습니다. 이는 본체 요소가 사용 가능한 수평 공간을 채우기 위해 확장되어 측정이 부정확해지기 때문입니다.

이 문제를 해결하려면 다음을 고려하세요. 함수:

function getBrowserWidth() {
  return Math.max(
    document.documentElement.clientWidth,
    window.innerWidth || 0
  );
}

설명:

• document.documentElement.clientWidth: 이 속성은 창의 내부 너비를 반환합니다. 픽셀(있는 경우 세로 스크롤 막대 너비 포함) 그러나 가로 스크롤 막대는 포함되지 않습니다.
• window.innerWidth: 이 속성은 가로 스크롤 막대를 포함하여 창의 내부 너비를 픽셀 단위로 반환합니다.

작동 방식:

이 기능은 먼저 사용을 시도합니다. document.documentElement.clientWidth를 선호하는 방법으로 사용합니다. 이 값을 사용할 수 없거나 0을 반환하는 경우 수평 스크롤 막대를 고려하기 위해 window.innerWidth로 대체됩니다.

이점:

• 가장자리 해결 너비가 100%인 본체의 경우.
• 가로에서도 정확한 브라우저 너비 측정 제공 스크롤바.

위 내용은 엣지 케이스를 처리하면서 JavaScript에서 브라우저 너비를 정확하게 얻으려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!