CSS视口大小不同

Question

我有一个响应页面，头部

react

我有一个CSS规则执行以下操作：

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

但是当我的浏览器宽度为983px并且使用jQuery记录时，已经触发了这个CSS规则.. $（window）.width（）;我想知道这可能是一个错误，我打开了：http://viewportsizes.com/mine/检查我当前的视口大小是什么...在那个页面上它的宽度是915px。当我将浏览器中的选项卡更改回我的页面，我在其中登录Firebug时，我可以看到该页面上的视口是983宽度...如何在该页面上的视口不同，以及css规则是在我预期的时候触发的......

Answer 1

使用jQuery函数

$(window).width() 

不考虑滚动条。这是一个简单的jsFiddle，演示了这一点（增长和缩小浏览器以查看宽度变化）：

https://jsfiddle.net/iamnottony/14pyfg3r/7/

div的高度会导致滚动条。这会导致背景在981px处变为红色（因为窗口的宽度（981px）加上滚动条的宽度为998px）

如果删除第二个.navbar-nav css规则

.navbar-nav{
  height: 1000px;
}

您会看到背景颜色在998px处变为红色（您最初期望的行为）