Welche CSS-Medienabfragen entsprechen den neuen Apple-Geräten? Ich muss die body
's background-color
einstellen, um die Hintergrundfarbe des sicheren Bereichs des X zu ändern.iPhone X/8/8 Plus CSS-Medienabfragen
17
A
Antwort
39
iPhone X
@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) { }
iPhone 8
@media only screen
and (device-width : 375px)
and (device-height : 667px)
and (-webkit-device-pixel-ratio : 2) { }
iPhone 8 Plus
@media only screen
and (device-width : 414px)
and (device-height : 736px)
and (-webkit-device-pixel-ratio : 3) { }
iPhone 6 +/6s +/7 +/8 + teilen die gleichen Größen, während das iPhone 7/8 auch tun.
der Suche nach einer bestimmten Orientierung?
Portrait
Fügen Sie die folgende Regel:
and (orientation : portrait)
Landschaft
Fügen Sie die folgende Regel:
and (orientation : landscape)
Referenzen:
3
Hier sind einige der folgenden Medienabfragen für iPhones. Ref Link https://mydevice.io/devices/
/* iphone 3 */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }
/* iphone 4 */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 6, 6s */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 7, 8 */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }
/* iphone 6+, 6s+, 7+, 8+ */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }
/* iphone X */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }
Verwandte Themen
- 1. iPhone 6 (Plus) Bildschirmgröße
- 2. Schriftgröße auf iPhone 6s plus
- 3. Problem mit Startbild in iPhone 6S plus und iPhone 7 plus
- 4. Wie anders iPhone x tatsächliche Bildschirmgröße von iPhone 8 plus
- 5. Spiel Absturz nur auf iPhone X und iPhone 8 Plus
- 6. Arkit Demo Crashing auf iPhone 6/iPhone 6 Plus
- 7. Ändern der Einschränkung von iPhone 7 und iPhone 7 Plus
- 8. iPhone 7 Plus Größe des Hintergrundbilds
- 9. Ziel iPhone 6 plus zu iPad app
- 10. AVAssetExportSession ist kein iPhone 7 - Plus Simulator
- 11. ionic view flackern in iPhone 6s plus
- 12. iPhone 7 Plus - AVFoundation Dual-Kamera
- 13. iPhone 6 und 6 Plus Responsive Haltepunkte
- 14. Unterdrücken Sie SplitViewController für iPhone 6 plus
- 15. python2.7 mysql arabische Zeichen zeigen wie \ XD9 \ x88 \ XD9 \ x88 \ xd8 \ xac \ xd8 \ XAF \ xd8 \ xa7 \ XD9 \ x84 \
- 16. Wie lautet die User Agent-Zeichenfolge für iPhone 8, iPhone 8 Plus und iPhone X?
- 17. Gradient in einen geclippten Kontext gezeichnet erscheint nicht auf Simulatoren für iPhone 6 plus, 6s plus und 7 plus NUR
- 18. UISplitViewController - verhindern das Aufteilen in Landschaft auf iPhone 6 plus
- 19. iPhone 6 Plus Absturz mit rekursivem UISplitViewController _canBecomeDeepestUnibiguousResponder
- 20. Etwas stimmt nicht mit dem iPhone 6 Plus tableView.separatorInset
- 21. Button ist nicht sichtbar auf iPhone 8 Plus
- 22. iPhone 6s Plus Portrait verwendet das Querformat Launch Image
- 23. UIPickerView UI und Funktionsproblem in iPhone 6s plus Gerät
- 24. Wie lautet die User Agent-Zeichenfolge für iPhone 7 Plus?
- 25. Wie programmierbarer iPhone 6 & 6 Plus Ansichtsmodus programmgesteuert
- 26. performSelector wird nicht in iPhone 5 und 7 Plus aufgerufen
- 27. UIlabel Schriftgrößenproblem für iPhone 5, 6, 6 plus
- 28. iPhone 6 und 6 plus falschen Rahmen geben, Grenzen Werte
- 29. Split View Controller Rotation auf iPhone 6 Plus
- 30. Set Hintergrundbild und Symbolbild in iPhone 6 und 6 plus
Sie sollen Referenzen hinzufügen, zum Beispiel: Links zu anderen SO Antworten, wenn man sie kopiert. – nathan
@nathan Antwort aktualisiert. –