$(window).width()가 미디어 쿼리 결과와 다른 이유는 무엇이며 어떻게 해결할 수 있습니까?

$(window).width()와 미디어 쿼리 결과 간의 불일치

Twitter Bootstrap 및 jQuery를 사용하여 뷰포트 기반 요소를 조작하는 경우 너비를 사용하면 $(window).width()에서 반환된 결과와 CSS 미디어 쿼리에서 계산된 너비 사이에 불일치가 발생할 수 있습니다. 이러한 차이는 반응형 동작의 정확한 적용을 방해합니다.

이 문제는 $(window).width() 계산에서 스크롤 막대 너비를 제외할 가능성에서 비롯됩니다. 이 문제를 해결하기 위해 제안되는 해결책 중 하나는 스크롤 막대를 명시적으로 포함하는 $(window).innerWidth()를 사용하는 것입니다.

그러나 미디어 쿼리에 맞는 포괄적인 접근 방식을 위해서는 다음과 같은 대체 방법을 사용하는 것이 좋습니다. CSS 미디어 쿼리와 일치합니다.

권장 솔루션:

1. window.matchMedia():

   • IE9에 대한 브라우저 지원이 문제가 되지 않으면 window를 활용하세요. .matchMedia()는 CSS 미디어 쿼리와 완전히 일치합니다. 브라우저 지원은 주목할 만합니다: https://caniuse.com/#feat=matchmedia

2. Modernizr:

   • 이전 브라우저와의 호환성을 위해 미디어 쿼리를 해석하는 모든 브라우저를 지원하는 Modernizr의 mq 방법을 사용하십시오. CSS.

이러한 솔루션을 통합하면 jQuery 코드와 CSS 미디어 쿼리의 뷰포트 너비 계산이 원활하게 정렬되도록 할 수 있습니다.

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