javascript - JS 中的窗口宽度与最大宽度 CSS 不匹配

Question

在 chrome 中看起来像:

$(window).width()

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

有人知道一个好的解决方法吗？

示例如下:http://codepen.io/krismeister/pen/LmJFt/

让你的浏览器宽度大约为 600 像素，然后拖过 550 像素的宽度。然后切换滚动条。我使用的是 chrome 版本 33.0.1750.152

Answer 1

我在类似的堆栈线程上发现了这个解决方法:

CSS media queries and JavaScript window width do not match

有一个 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