Medienanfragen funktionieren nicht, wenn Meta-Tag-Ansichtsfenster

Question

gesetzt Wenn ich Ansichtsfenster in meiner Anwendung zu definieren, wie unten

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

und Medien-Anfragen erwähnt wie unten

erwähnt

@media screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (orientation: portrait) { 
    /* Style here*/ 
} 

dann Medien dert nicht funktionieren. aber wenn ich Meta-Tag aus HTML entfernen, dann funktioniert Media-Queses perfekt.

kann mir jemand sagen, warum das passiert und was kann die Lösung sein?

Answer 1

Die Breite Medienfunktion beschreibt die Breite der Renderoberfläche des Ausgabegeräts (z. B. die Breite des Dokumentfensters oder die Breite der Seitenbox auf einem Drucker).

Die geräte Breite beschreibt die Breite des Ausgabegerätes (den gesamten Bildschirm oder Seite, anstatt nur den Rendering-Bereich, wie das Dokumentfenster Bedeutung).

Der Hauptunterschied zwischen ihnen besteht darin, dass Gerätebreiten nicht immer dem Layout-Ansichtsfenster des Geräts entsprechen.

Also, wenn Sie versuchen Sie Stil, dies zu ändern:

@media screen 
    and (min-width: 414px) 
    and (max-width: 736px) 
    and (orientation: portrait) { 
    /* Style here*/ 
} 

Sie werden wahrscheinlich Medien-Abfrage auf Ihrem Gerät arbeiten.

Answer 2

Try für CSS:

@media only screen 
    and (min-width: 414px) 
    and (max-width: 736px) 
    and (orientation: portrait) { 
     /* Style here*/ 
} 

HTML: <meta name="viewport" content="width=device-width, initial-scale=1"> Ihre Breite Sie Gerätebreite gleich bereits in Ihrem Meta-Tag festgestellt wird, so dass es von Ihrem CSS entfernen.