$(window).width() 및 CSS 미디어 쿼리가 서로 다른 뷰포트 너비를 보고하는 이유는 무엇입니까?

$(window).width()와 CSS 미디어 쿼리 사이에서 일관되지 않게 측정된 뷰포트 너비

jQuery의 $(window).width를 사용하는 경우 () 뷰포트의 너비를 결정하기 위해 CSS 미디어 쿼리로 계산된 너비와 불일치가 발생할 수 있습니다. 이러한 차이는 브라우저의 스크롤 막대 너비를 비롯한 다양한 요인에 의해 발생할 수 있습니다.

이 문제를 해결하려면 window.matchMedia() 사용을 고려해 보세요. 이 방법은 CSS 미디어 쿼리와 일치하는 정확한 너비 계산을 제공합니다. 이는 모든 최신 브라우저에서 지원되며 다음과 같이 구현할 수 있습니다.

function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

Modernizr을 사용하는 대체 솔루션:

브라우저 호환성이 우려되는 경우 다음을 사용할 수 있습니다. Modernizr에서 제공하는 mq 방식입니다. 미디어 쿼리를 이해하는 모든 브라우저를 지원합니다.

if (Modernizr.mq('(max-width: 767px)')) {
    //...
} else {
    //...
}

스크롤 막대를 고려하면서 $(window).innerWidth()를 사용하여 뷰포트 너비를 계산하는 것이 항상 최적의 솔루션은 아닐 수도 있습니다. 스크롤바 너비는 브라우저마다 다를 수 있습니다.

위 내용은 $(window).width() 및 CSS 미디어 쿼리가 서로 다른 뷰포트 너비를 보고하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!