JS中的窗口宽度与max-width CSS不匹配

Question

它看起来像铬：

$(window).width()

当有滚动条时，与CSS3媒体查询不匹配。 没有滚动条，它匹配得很好。

有谁知道一个好的工作？

这是一个例子： http ： //codepen.io/krismeister/pen/LmJFt/

使您的浏览器宽约600px，然后拖动宽度为550px。 然后切换滚动条。 我正在使用Chrome Version 33.0.1750.152

Answer 1

我在类似的堆栈线程上找到了这个解决方法：

CSS媒体查询和JavaScript窗口宽度不匹配

有一个jsFiddle为你工作。 http://jsfiddle.net/j839b/

用这个

function recordWidth(){
  var w=window,
      d=document,
      e=d.documentElement,
      g=d.getElementsByTagName('body')[0],
      x=w.innerWidth||e.clientWidth||g.clientWidth,
      y=w.innerHeight||e.clientHeight||g.clientHeight;
    $('#last-width').text(x);
}

来自http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript

Answer 2

我在铬上似乎和我一起改变：没有卷轴：最后记录的宽度 - 胜利：1920，doc：1920，身体：1904随着卷轴：最后记录的宽度 - 胜利：1905，doc：1905，身体：1889