$(window).width()가 미디어 쿼리 중단점과 다른 이유는 무엇입니까?

$(window).width()와 미디어 쿼리 간의 창 너비 불일치

Twitter Bootstrap 및 사용자 정의 CSS를 사용하는 프로젝트에서 뷰포트 너비 값 간에 불일치가 발생합니다. $(window).width() 및 미디어 쿼리에 의해 결정됩니다. 미디어 쿼리 중단점을 767px로 설정했음에도 불구하고 $(window).width()는 지속적으로 16px 더 적은 값을 반환하여 예상치 못한 CSS 계산이 발생합니다.

원인 및 해결 방법

이러한 불일치는 $(window).width() 계산에서 스크롤 막대 너비를 제외했기 때문입니다. 이를 고려하려면 스크롤 막대 너비를 통합하는 $(window).innerWidth()를 사용하는 것이 좋습니다. 그러나 미디어 쿼리 중단점과 일관된 동작을 원하는 경우 이 접근 방식은 적합하지 않을 수 있습니다.

1. window.matchMedia()(최신 브라우저만 해당)

IE9를 제외한 최신 브라우저를 지원할 수 있는 경우 window.matchMedia()가 원활한 솔루션을 제공합니다. CSS 미디어 쿼리와 완전히 일치하며 JavaScript와 CSS 간의 일관성을 보장합니다.

2. Modernizr의 mq 방법

더 폭넓은 브라우저 지원을 위해서는 Modernizr의 mq 방법이 실행 가능한 옵션입니다. CSS 미디어 쿼리를 이해하는 브라우저에 대해 window.matchMedia()의 동작을 에뮬레이트합니다.

구현

Modernizr의 mq 메서드를 구현하려면:

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

위 내용은 $(window).width()가 미디어 쿼리 중단점과 다른 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!