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) {}
iphone
css
responsive-design
media-queries
iphone-5
Einzelgänger
quelle
quelle
Antworten:
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
quelle
and (-webkit-min-device-pixel-ratio: 2)
in iPhone 5 Medienabfrage hinzufügen , damit es in PhoneGap Webview funktioniert, wie von @TaeKwonJoeEs gibt dies, was ich diesem Blog zuschreibe :
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:
NB: Ich habe den obigen Code noch nicht getestet, aber ich habe zuvor durch Kommas getrennte
@media
Abfragen 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.
quelle
iPhone 5 and not to iOS 6
? Sollte es sein: "iPhone5 und nicht auf iPhone 6"?Alle oben aufgeführten Antworten, die für
max-device-width
odermax-device-height
fü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 :
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 * /
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-width
in diesem Fall. Dies beschleunigt das Rendern von Webseiten für mobile Browser.quelle
Für mich war die Abfrage, die den Job erledigt hat:
quelle
iPhone 5 im Hoch- und Querformat
iPhone 5 im Querformat
iPhone 5 im Hochformat
quelle
max-device-width : 568px
ein Porträt?device-width: 320px and device-height: 568px
stattdessen verwenden?Keine der Antworten funktioniert für mich als Ziel für eine Phonegapp-App.
Wie der folgende Link zeigt, funktioniert die folgende Lösung.
quelle
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:
quelle
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)
quelle
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)
quelle
quelle
Sie sollten vielleicht das "-webkit-min-device-pixel-ratio" auf 1,5 senken, um alle iPhones zu fangen?
quelle