Why Does $(window).width() Differ from Media Query Results, and How Can I Fix It?

Discrepancy Between $(window).width() and Media Query Results

When using Twitter Bootstrap and jQuery to manipulate elements based on viewport width, you may encounter a discrepancy between the results returned by $(window).width() and the calculated width in your CSS media query. This difference hinders the accurate application of responsive behaviors.

The issue stems from the potential exclusion of the scrollbar width in $(window).width() calculations. To resolve this, one suggested solution is to use $(window).innerWidth(), which explicitly includes the scrollbar.

However, for a comprehensive approach that aligns with your media query, consider using alternative methods that are consistent with CSS media queries.

Recommended Solutions:

1. window.matchMedia():

   • If browser support for IE9 is not a concern, utilize window.matchMedia(), which fully corresponds with CSS media queries. Its browser support is noteworthy: https://caniuse.com/#feat=matchmedia

2. Modernizr:

   • For compatibility with older browsers, employ Modernizr's mq method, which supports all browsers that interpret media queries in CSS.

By incorporating these solutions, you can ensure that the calculations of viewport width in your jQuery code and CSS media queries align seamlessly.

The above is the detailed content of Why Does $(window).width() Differ from Media Query Results, and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!