Response.viewportW() evaluates the actual inner width of the page only once, when it's first loaded

[indrek-k]

Example: if you include response.js in document head and the document is long enough to have a scrollbar, calling Response.viewportW() will always return clientWidth.

, viewportW = docElem['clientWidth'] < win['innerWidth'] ? function() {
    return win['innerWidth'];
} : function() {
    return docElem['clientWidth'];
}

It seems that docElem['clientWidth'] < win['innerWidth'] is evaluated only once - when the browser first loads response.js. For example, if clientWidth and innerWidth are initially equal (i.e. no scrollbar), the comparison (line 94) will evaluate to false, thus setting Response.viewportW() to always return clientWidth. If a scrollbar appears later, nothing changes and clientWidth will still be returned, even though innerWidth is now bigger. Which means on win/chrome the returned value is off by 15px.

[JakedUp]

I can also attest to this. I am seeing exactly a 15px difference between my media queries and the actual reported breakpoint in Windows+Chrome.

My current project requires all scripts to be in the head (limitations of client's framework), so the only way I can get around this is wrapping Response in a window.load function. However, this is less than ideal because I cannot start writing any of my additional responsive logic until after the page has fully loaded.

Does anyone have an immediate change that I can make to fix this? I badly need to get this working ASAP! Any help would be MUCH appreciated!!

[ryanve]

I'll fix this tonight and release new patch version. I've already fixed it in verge.

[ryanve]

Fixed in 0.7.12.

@indrek-k Thanks for reporting this.

See notes about the technique here.

[JakedUp]

Amazing. Thanks soo much!

[ryanve]

@JakedUp You're welcome!