Warum funktioniert diese Medienabfrage nicht für mein iPhone?

Question

Ich habe mit iPhone 6 und 4 überprüft, ob ein anderes Stylesheet angewendet wird. Es hat nicht. Hier sind meine Stylesheets:

<link rel="stylesheet" media="screen and (max-width: 800px)" href="mobileindex.css"> 
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="desktopindex.css"> 

Ja, es gibt eine Lücke in ihnen. Dieser Platz ist später für Tablets reserviert. Aus irgendeinem Grund wurde die mobileindex.css nicht mit diesen Einstellungen angewendet. Ich muss die Ausrichtung zweimal wechseln, damit sie angezeigt wird. Dies behebt jedoch das Problem:

<link rel="stylesheet" media="screen and (max-width: 1000px)" href="mobileindex.css"> 
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="desktopindex.css"> 

Ist 800px nicht genug für ein iPhone 4 und 6? Wie kommt es jetzt funktioniert? Die Seite, auf der das passiert ist, ist msolonko.net.

Answer 1

Können Sie bitte die Medienabfragen unter Ihrem Hauptstil hinzufügen und danach Ihre Webanwendung auf Ihrem mobilen Gerät überprüfen.

@media screen and (min-width:768px) and (max-width:1024px) { 
    /*Your Mobile Style will be here.*/ 
} 

Die Hauptsache ist, dass Sie die falsche min-width und max-width für iPhone6 ​​Gerät anwenden. Die tatsächliche Größe des iPhone6 ​​für Responsive Design ist unten.

iPhone 6 Portrait

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 
    /*Your Mobile Style will be here.*/ 
} 

iPhone 6 Landschaft

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 
    /*Your Mobile Style will be here.*/ 
}