iPhone 5 CSS-Medienabfrage

132

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) {}
Einzelgänger
quelle
3
Können wir Ihre vorhandenen Medienanfragen sehen?
BoltClock
Versuche dies? halgatewood.com/iphone-5-media-query
sachleen

Antworten:

283

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

2C-B
quelle
2
Ich mag diesen Ansatz, konnte ihn aber erst in einer PhoneGap-App-Webansicht zum Laufen bringen, wenn ich das Pixel-Verhältnis -webkit-min-device-hinzugefügt habe, wie von Stephen Sprawl erklärt. Zsprawl.com/iOS/2012/09/css-media-queries-for -das-iPhone-5 . @ Media-Bildschirm und (Gerät-Seitenverhältnis: 40/71) und (-Webkit-Min-Gerät-Pixel-Verhältnis: 2) {// iPhone5 für die Phonegaps}
TaeKwonJoe
Ich musste and (-webkit-min-device-pixel-ratio: 2)in iPhone 5 Medienabfrage hinzufügen , damit es in PhoneGap Webview funktioniert, wie von @TaeKwonJoe
Mahendra Liya
1
Vielen Dank, dass Sie dies aktualisiert haben, um das iPhone 6 einzuschließen!
Maverick
Dies funktioniert ziemlich gut, wenn ich iPhone 4 und iPhone 5 in CSS unterscheiden muss.
Euccas
1
Für das iPhone 6 (Gerät-Seitenverhältnis: 667/375) funktionierte es auf einem echten physischen iPhone 6 nicht. Es funktionierte jedoch auf dem iOS-Simulator. Ich habe es in 375/667 geändert und es hat auf dem physischen Gerät funktioniert.
Mach was jetzt
64

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 */
}
Eric
quelle
1
Können Sie vorschlagen, wie ich diese Abfrage mit meiner alten kombinieren könnte, um sowohl das iPhone 4 als auch das iPhone 5 zu fangen?
Maverick
6
Vorsicht, dies wirkt sich auch auf andere Telefone aus - nicht nur auf die iPhones. Ein Beispiel ist das Samsung Galaxy Nexus.
Mike Sweeney
@ MikeSweeney Guter Anruf. Ich habe meinen Beitrag mit einer neuen Methode aktualisiert, die keine anderen Geräte enthalten sollte.
Eric
@Eric Das ist so ziemlich das, worauf ich mich nach ein paar Cross-Phone-Tests festgelegt habe - ich musste Höhe in die Mischung bringen! Scheint auf den 7-8 verschiedenen Handys, auf denen ich teste, großartig zu funktionieren.
Mike Sweeney
Ist diese Zeile korrekt : iPhone 5 and not to iOS 6? Sollte es sein: "iPhone5 und nicht auf iPhone 6"?
Sgnl
38

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.

Dan
quelle
10
Ich würde progressive Verbesserung und mobil zuerst gehen. Das beginnt mit dem Handy und dem Aufbau mit minimaler Gerätebreite.
Primavera133
2
Beachten Sie auch, dass die Lösung für Höhe, Breite und Pixelverhältnis, die nur mit dem iPhone 5 übereinstimmt, auch mit dem nächsten Telefon übereinstimmt, das dieselben Eigenschaften aufweist. Das übergeordnete Thema Ihrer Antwort ist richtig: Das Denken in bestimmten Geräten ist der falsche Weg.
Pointy
@Dan - Auch wenn Ihre Antwort die Frage nicht direkt anspricht, wird sie in einer breiteren Perspektive der Best Practices für Responsive Design betrachtet. Die Dinge, die Sie hier geschrieben haben, sind meiner Meinung nach sehr tiefgreifend und praktisch. Fünf Sterne.
Dimitri Vorontzov
@ Dan - Beim Versuch, Ihren Vorschlag umzusetzen, funktioniert etwas nicht. Darf ich Sie bitten, einen Blick darauf zu werfen: stackoverflow.com/questions/16486078/…
Dimitri Vorontzov
@ Primavera, bitte sag warum. Was ist der Vorteil eines mobilen ersten Ansatzes?
S ..
7

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)
eli philosoph
quelle
7

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*/

}
Sudheer
quelle
Warum brauchst du max-device-width : 568pxein Porträt?
adi518
1
@ adi518 Wenn Sie keine maximale Breite verwenden, werden CSS-Regeln für jedes Gerät angewendet, das größer als 320 Pixel ist. Dies entspricht buchstäblich den meisten Geräten - Tablets, Desktops usw.
Sudheer,
1
Warum nicht device-width: 320px and device-height: 568pxstattdessen verwenden?
adi518
5

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
}
ppcano
quelle
5

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">
Mike Wells
quelle
3

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)

Pieroxy
quelle
0

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)

noreabu
quelle
0
/* 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) { 

    }
}
Arthur Yakovlev
quelle
-3

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 */
}
Genesor
quelle
1
Welches iPhone verwendet ein Gerätepixelverhältnis von 1,5?
BoltClock
1
Ich empfehle dringend, Medienabfragen abhängig von der Gerätebreite und nicht vom Gerätenamen (iPhone) durchzuführen. Wenn das iPhone 5 mehr Breite hat, machen Sie es einfach nutzbar.
Tom Roggero