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; } 
} 

但這CSS規則已被觸發時我的瀏覽器有一個983px的寬度，我用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變紅（因爲窗口（981px）加上滾動條的寬度，寬度爲998px）

如果刪除第二.navbar-NAV CSS規則

.navbar-nav{ 
    height: 1000px; 
} 

你會看到背景顏色在998px變成紅色（你最初期望的行爲）