Why Do $(window).width() and CSS Media Queries Report Different Viewport Widths?

Inconsistently Measured Viewport Width between $(window).width() and CSS Media Queries

When using jQuery's $(window).width() to determine the width of the viewport, you may encounter discrepancies with the width calculated by CSS media queries. This difference can be attributed to various factors, including the width of the browser's scrollbar.

To resolve this issue, consider using window.matchMedia(). This method provides accurate width calculations that are consistent with CSS media queries. It is supported by all modern browsers and can be implemented as follows:

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

Alternate Solution using Modernizr:

If browser compatibility is a concern, you can use the mq method provided by Modernizr. It supports all browsers that understand media queries.

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

Note that using $(window).innerWidth() to calculate the viewport width, while taking into account the scrollbar, may not always be the optimal solution as scrollbar widths can vary across browsers.

The above is the detailed content of Why Do $(window).width() and CSS Media Queries Report Different Viewport Widths?. For more information, please follow other related articles on the PHP Chinese website!