iPhone ignoriert alle Medienabfragen

Question

Die Website funktionierte vor ein paar Monaten absolut gut. Plötzlich liest kein iPhone eine einzige Medienabfrage in der CSS-Datei. Ich habe Folgendes getan:

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

In meiner HTML-Datei enthalten.

/* Iphone 6 plus portrait & landscape */ 
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) { 

in meiner CSS-Datei enthalten

versucht, die folgenden:

@media all and (min-device-width : 414px) and (max-device-width : 736px) { 

and (-webkit-min-device-pixel-ratio : 3) 

and (min-resolution: 401dpi) 
and (device-aspect-ratio:16/9) 

Nichts.

Ich habe überprüft, dass die CSS-Datei geladen wird.

Wenn ich die Website über Chrome, auf meinem Windows-PC, in der iPhone 6+ Auflösung überprüfen, sieht es perfekt aus. Aber der Client, sowie jeder einzelne iPhone-Simulator, den ich ausprobiert habe, zeigt keine der Medienabfragen. Ich habe kein iPhone, aber der Client tut es.

Kann jemand bitte erklären, wie das passieren könnte? Was fehlt? Bitte helfen Sie.

Answer 1

Also war die Lösung scheinbar, (max-width)/(min-width) neben jeder max-device-width und min-device-width hinzuzufügen. Dies machte die Abfrage:

@media only screen and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait), 
only screen and (min-width: 414px) 
and (max-width : 736px) and (orientation : portrait) { } 

Dies wird auf dem Simulator arbeitet, wird weiter testen und mehr hinzufügen, wenn erforderlich.