Scrollbar width not handled?

[tbredin]

The window width this tool reports is not correct when a scrollbar is present.

eg: I am seeing width: 753 when my browser is actually 768 px wide, showing my >767px lg layout from my css, but still reporting incorrectly as md by this utility because it is not considering media queries (which include scrollbar width).

Looks like its querying the inner width rather than including the scrollbar in its calculations. CSS media queries will measure your screen including the scrollbar.

Testing in Chrome 87.0.4280.141

[tbredin]

Possible workaround:

// hide the scrollbar on the body
body {
    overflow: hidden;
}

// requires a div container around your app to handle the scroll  
body > div {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
    // unsure if this is really needed (see comment below)
    -webkit-overflow-scrolling: touch;
}

This will work because the scrollbar you'll now see is on the inner div, whereas the body is always the full width of the browser so matching the equivalent CSS media query.

I haven't tested this thoroughly yet, and from memory it might have issues on some touch devices that need -webkit-overflow-scrolling: touch; on scroll containers to reproduce their momentum scrolling behaviour.