Inconsistency with CSS media queries width

[rap1ds]

Hi!

I noticed that minwidth does not include scrollbar width if scrollbar is visible. However, CSS media queries do take scrollbar size into account.

Given there's a media query min-width: 768 that changes the layout to tablet mode and there's a relocate call relocate(768, $("#filters"), $("#desktop-filters").get(0));, this is what happens when scrollbar is visible and I resize the window:

1. When window size is 1000px, layout is desktop layout, everything ok
2. When I resize the window to 782px then relocate is triggered, however, the layout is still in desktop mode. Not ok.
3. When I resize the window to 768px then the layout is changed to tablet mode. Everything ok.

My solution was to use window.innerWidth:

var getWindowWidth = function() {
  // Get window width, code adapted from jQuery
  if ('innerWidth' in win) {
    return win.innerWidth;
  } else {
    var docwindowProp = doc.documentElement["clientWidth"];
    return doc.compatMode === "CSS1Compat" && docwindowProp
           || doc.body && doc.body["clientWidth"]
           || docwindowProp;
  }
}

It works as it should, but the browser support is >= IE9.

What do you think, could you use the innerWidth in minwidth?

[Sam152]

Can we get this into a pull request? I had a similar problem where the relocate was sporadically moving elements around at widths anywhere within 10px of where I'd asked. This fixed it for me.

I'm not sure why anything more complicated than innerWidth needs to be used?

Other than that, love the library. Working really well for me.