CSS Darstellungsgröße ist anders

Question

Ich habe eine ansprechende Seite mit dem im Kopf

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

Und ich habe eine CSS-Regel, die macht folgendes:

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

Aber diese CSS-Regel wird bereits ausgelöst, wenn Mein Browser hat eine Breite von 983px, die ich mit jQuery angemeldet habe. $ (window) .width(); Ich fragte mich, ob das vielleicht ein Bug ist und ich öffnete: http://viewportsizes.com/mine/, um zu überprüfen, was meine aktuelle Ansichtsfenstergröße ist ... Auf dieser Seite ist es 915px Breite. Wenn ich die Registerkarte in meinem Browser wieder auf meine Seite, wo ich die Firebug einloggen habe, kann ich sehen, dass mein Ansichtsfenster auf dieser Seite 983 Breite ist ... Wie kann es sein, dass das Ansichtsfenster auf dieser Seite anders ist, und die CSS Regeln nicht ausgelöst werden, wenn ich es erwarten ...

Answer 1

die Funktion jQuery Mit

$(window).width() 

berücksichtigt nicht Scrollbalken. Hier ist ein einfaches jsFiddle, die diese (wachsen und schrumpfen den Browser die Breitenänderung zu sehen) zeigt:

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

Die Höhe des div bewirkt eine Scrollbar. Dies bewirkt, dass der Hintergrund bei 981px rot werden (weil die Breite des Fensters (981px) und die Breite der Scrollbar ist 998px)

Wenn Sie die zweite .navbar-nav CSS-Regel

.navbar-nav{ 
    height: 1000px; 
} 

entfernen Sie werden sehen, dass die Hintergrundfarbe bei 998px rot wird (das Verhalten, das Sie ursprünglich erwartet hatten)