CSS 视口大小不同

Question

我在头部有一个响应式页面

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

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

@media screen and (min-width:998px) { 
   .navbar-nav { background-color:red; }
}

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

Answer 1

使用jQuery函数

$(window).width()

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

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

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

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

.navbar-nav{
  height: 1000px;
}

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

CSS 视口大小不同

CSS viewport size is different

css

viewport

responsive