iPhone 5 CSS-Medienabfrage

Das iPhone 5 hat einen längeren Bildschirm und erfasst nicht die mobile Ansicht meiner Website. Was sind die neuen Responsive Design-Abfragen für das iPhone 5 und kann ich sie mit vorhandenen iPhone-Abfragen kombinieren?

Meine aktuelle Medienabfrage lautet:

@media only screen and (max-device-width: 480px) {}

Eine weitere nützliche Medienfunktion ist device-aspect-ratio.

Beachten Sie, dass das iPhone 5 kein Seitenverhältnis von 16: 9 hat . Es ist tatsächlich 40:71.

iPhone <5:
@media screen and (device-aspect-ratio: 2/3) {}

iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}

iPhone 6:
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}

iPad:
@media screen and (device-aspect-ratio: 3/4) {}

Referenz:
Medienabfragen @ W3C
iPhone Modellvergleich
Seitenverhältnisrechner

Es gibt dies, was ich diesem Blog zuschreibe :

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 5 only */
}

Beachten Sie, dass das iPhone 5 nicht auf die auf dem Gerät installierte iOS-Version reagiert.

Um mit Ihrer vorhandenen Version zusammengeführt zu werden, sollten Sie diese durch Kommas trennen können:

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
}

NB: Ich habe den obigen Code noch nicht getestet, aber ich habe zuvor durch Kommas getrennte @mediaAbfragen getestet , und sie funktionieren einwandfrei.

Beachten Sie, dass einige der oben genannten Geräte möglicherweise ähnliche Verhältnisse aufweisen, z. B. das Galaxy Nexus. Hier ist eine zusätzliche Methode, die nur auf Geräte abzielt, die eine Dimension von 640 Pixel (560 Pixel aufgrund einiger seltsamer Anomalien der Anzeigepixel) und eine Dimension zwischen 960 Pixel (iPhone <5) und 1136 Pixel (iPhone 5) haben.

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    /* iPhone only */
}

Alle oben aufgeführten Antworten, die für max-device-widthoder max-device-heightfür Medienabfragen verwendet werden, weisen einen sehr starken Fehler auf: Sie zielen auch auf viele andere beliebte mobile Geräte ab (wahrscheinlich unerwünscht und nie getestet, oder die in Zukunft auf den Markt kommen werden).

Diese Abfrage funktioniert für alle Geräte mit einem kleineren Bildschirm , und wahrscheinlich ist Ihr Design fehlerhaft.

In Kombination mit ähnlichen gerätespezifischen Medienabfragen (für HTC, Samsung, IPod, Nexus ...) wird diese Vorgehensweise eine Zeitbombe auslösen. Beim Debiggen kann diese Idee Ihr CSS zu einem unkontrollierten Spagetti machen. Sie können niemals alle möglichen Geräte testen.

Bitte beachten Sie, dass die einzige Medienabfrage, die immer auf IPhone5 abzielt, und nichts anderes :

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

Beachten Sie, dass hier die genaue Breite und Höhe, nicht die maximale Breite, überprüft wird.

Was ist nun die Lösung? Wenn Sie eine Webseite schreiben möchten, die auf allen möglichen Geräten gut aussieht, verwenden Sie am besten Degradation

/ * Verschlechterungsmuster Wir überprüfen die Bildschirmbreite nur sicher, dies ändert sich von Hoch- zu Querformat * /

/*css for desktops here*/

@media (max-device-width: 1024px) {
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
 /*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
 /*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
 /*IPhone portrait and smaller. You can probably stop on 320px*/
}

Wenn mehr als 30% Ihrer Website-Besucher von Handys kommen, stellen Sie dieses Schema auf den Kopf und bieten Sie einen Mobile-First-Ansatz. Verwenden Sie min-device-widthin diesem Fall. Dies beschleunigt das Rendern von Webseiten für mobile Browser.

Für mich war die Abfrage, die den Job erledigt hat:

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)

iPhone 5 im Hoch- und Querformat

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

/* styles*/
}

iPhone 5 im Querformat

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* styles*/

}

iPhone 5 im Hochformat

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
 /* styles*/

}

Keine der Antworten funktioniert für mich als Ziel für eine Phonegapp-App.

Wie der folgende Link zeigt, funktioniert die folgende Lösung.

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}

Nur eine sehr schnelle Ergänzung, da ich einige Optionen getestet und diese auf dem Weg verpasst habe. Stellen Sie sicher, dass Ihre Seite Folgendes enthält:

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

Sie können Ihre Antwort für das iPhone5 zusammen mit anderen Smartphones in der Medienfunktionsdatenbank für mobile Geräte ziemlich einfach erhalten:

http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

Sie können sogar Ihre eigenen Gerätewerte auf der Testseite auf derselben Website abrufen.

(Haftungsausschluss: Dies ist meine Website)

afaik no iPhone verwendet ein Pixelverhältnis von 1,5

iPhone 3G / 3GS: (-Webkit-Geräte-Pixel-Verhältnis: 1) iPhone 4G / 4GS / 5G: (-Webkit-Geräte-Pixel-Verhältnis: 2)

/* iPad */
@media screen and (min-device-width: 768px) {
    /* ipad-portrait */
    @media screen and (max-width: 896px) { 
        .logo{
            display: none !important;
        }
    }
    /* ipad-landscape */
    @media screen and (min-width: 897px) { 

    }
}
/* iPhone */
@media screen and (max-device-width: 480px) {
    /* iphone-portrait */
    @media screen and (max-width: 400px) { 

    }
    /* iphone-landscape */
    @media screen and (min-width: 401px) { 

    }
}

Sie sollten vielleicht das "-webkit-min-device-pixel-ratio" auf 1,5 senken, um alle iPhones zu fangen?

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 1.5) {
/* iPhone only */
}