JS中的窗口宽度与最大宽度CSS不匹配答案

【问题标题】：window width in JS doesn't match max-width CSSJS中的窗口宽度与最大宽度CSS不匹配
【发布时间】：2014-05-07 04:08:03
【问题描述】：

它看起来像在 chrome 中：

$(window).width()

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

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

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

制作你的浏览器，大约 600 像素宽，然后拖过 550 像素宽。然后切换滚动条。我在 chrome Version 33.0.1750.152

【问题讨论】：

CSS media queries and JavaScript window width do not match的可能重复

标签： javascript css

【解决方案1】：

我在 chrome 上，似乎随着我的变化而改变：无卷轴：最后记录的宽度 - win:1920, doc:1920, body:1904 带卷轴：最后记录的宽度 - win:1905, doc:1905, body:1889

【讨论】：

你必须在媒体查询所在的 550px 范围内移动。

【解决方案2】：

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

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

【讨论】：