iPhone X / 8/8 Plus CSS-Medienabfragen

76

Welche CSS-Medienabfragen entsprechen den neuen Geräten von Apple? Ich brauche die eingestellt bodyist background-colordie X sichere Bereich Hintergrundfarbe zu ändern.

Nathan
quelle

Antworten:

150

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) { }


Das iPhone 6 + / 6s + / 7 + / 8 + hat die gleichen Größen wie das iPhone 7/8.


Suchen Sie eine bestimmte Orientierung?

Porträt

Fügen Sie die folgende Regel hinzu:

    and (orientation : portrait) 

Landschaft

Fügen Sie die folgende Regel hinzu:

    and (orientation : landscape) 



Verweise:

Nathan
quelle
1
Mein iPhone 8+ mit iOS 12 wird von der iPhone X-Abfrage getroffen
user1415066
viewportsizes.com/mine meldet 320 x 450 für iPhone 8. Außerdem : Mozilla/5.0 (iPhone; CPU iPhone OS 12_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1.
Adrrc
Die Medienabfrage für das iPhone 8 Plus funktioniert zumindest nicht mit Chrome.
Talha Meh
79

Hier sind einige der folgenden Medienabfragen für iPhones. Hier ist der Referenzlink https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

        /* 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, 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 , XS, 11 Pro */
        @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }

        /* iphone XR, 11 */
        @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) { }

       /* iphone XS Max, 11 Pro Max */
        @media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 3) { }

Yash Vekaria
quelle
Sie sollten Verweise hinzufügen, z. B.: Links zu anderen SO-Antworten, wenn Sie diese kopiert haben.
Nathan
Gibt es keinen Unterschied zwischen 6, 6s, 7 und 8 oder sehe ich ihn nicht?
Perry
@Perry, ja du hattest recht. Ich habe meine Antwort bearbeitet. Vielen Dank.
Yash Vekaria
Mein iPhone 8+ mit iOS 12 wird von der iPhone X-Abfrage getroffen
user1415066
1
@GlennG Ich hatte auch meine Antwort aktualisiert, es ist Frage;)
Yash Vekaria
18

Ich habe bemerkt , dass die Antworten hier verwenden: device-width, device-height, min-device-width, min-device-height, max-device-width, max-device-height.

Bitte verwenden Sie sie nicht, da sie veraltet sind . Siehe MDN als Referenz . Verwenden Sie stattdessen die reguläre min-width, max-widthund so weiter. Für zusätzliche Sicherheit können Sie min und max auf den gleichen px-Betrag einstellen. Zum Beispiel:

iPhone X.

@media only screen 
    and (width : 375px) 
    and (height : 635px)
    and (orientation : portrait)  
    and (-webkit-device-pixel-ratio : 3) { }

Möglicherweise stellen Sie auch fest, dass ich 635px für die Höhe verwende. Probieren Sie es selbst aus, die Fensterhöhe beträgt tatsächlich 635px. Führen Sie den iOS-Simulator für das iPhone X aus und führen Sie ihn im Safari Web Inspector aus window.innerHeight. Hier einige nützliche Links zu diesem Thema:

Sam Sedighian
quelle
Dies ist die EINZIGE Methode, die funktioniert. Alle anderen oben genannten Methoden, sogar CSS-Tricks, sind falsch. Sie verwenden Methoden wie Yash Vakeria oder Josh, werden aber auch auf dem iPhone 6-7-8 aufgerufen. ABER ! Verwenden Sie die 812px anstelle der erwähnten 635px, das Chrome Inspector Tool hat sie nicht wie von Sam erwähnt erfasst ...
Renegade_Mtl
1

Es scheint, dass die genaueste (und nahtloseste) Methode zum Hinzufügen der Polsterung für das iPhone X / 8 mit env () ...

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

Hier ist ein Link, der dies beschreibt:

https://css-tricks.com/the-notch-and-css/

wasif.io
quelle
Hallo Wasif, versuchen Sie, `` um Ihren Code zu setzen, um die Formatierung zu verbessern.
Alan Scarpa
Leider wird dies die Polsterung auch auf dem iPhone 6 anwenden, zumindest im Simulator. Und das ist unerwünscht.
Emil.c
1

Wenn auf Ihrer Seite ein meta[@name="viewport"]Element in ihrem DOM fehlt , kann Folgendes verwendet werden, um ein mobiles Gerät zu erkennen:

@media only screen and (width: 980px), (hover: none) { … }

Wenn Sie Fehlalarme mit Desktops vermeiden möchten, deren Ansichtsfenster auf magische Weise auf 980px eingestellt ist, wie dies bei allen mobilen Browsern der device-widthFall ist, kann dem Mix auch ein Test hinzugefügt werden:

@media only screen and (max-device-width: 800px) and (width: 980px), (hover: none) { … }

Laut der Liste unter https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_querieshover scheint die neue Eigenschaft die letzte neue Möglichkeit zu sein, um zu erkennen, dass Sie selbst ein mobiles Gerät haben das macht nicht wirklich richtig hover; Es wurde erst 2018 mit Firefox 64 (2018) eingeführt, obwohl es seit 2016 mit Android Chrome 50 (2016) oder sogar seit 2014 mit Chrome 38 (2014) unterstützt wird:

cnst
quelle