wake-up-neo.net

iPhone X/8/8 Plus CSS-Medienabfragen

Welche CSS-Abfragen entsprechen den neuen Geräten von Apple? Ich muss body_s_background-color einstellen, um die Hintergrundfarbe des sicheren Bereichs des X zu ändern.

cssmedia-queriesiphone-xiphone-8iphone-8-plus
51
nathan

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 gleiche Größe, das iPhone 7/8 auch.

Suchen Sie nach einer bestimmten Orientierung?

Portrait

Fügen Sie die folgende Regel hinzu:

    and (orientation : portrait)

Landschaft

Fügen Sie die folgende Regel hinzu:

    and (orientation : landscape)



Verweise:

101
nathan

Hier sind einige der folgenden Medienanfragen für IPhone. Hier ist der ref link 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 */
    @media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }

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

   /* iphone XS */
    @media only screen and (min-device-width : 375px) and (max-device-height : 812px) and (-webkit-device-pixel-ratio : 3) { }

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

Ich habe bemerkt, dass die Antworten hier verwendet werden: 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ären min-width, max-width und so weiter. Für zusätzliche Sicherheit können Sie den minimalen und den maximalen Wert auf den gleichen px-Wert einstellen. __ Beispiel:

iPhone X

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

Sie stellen möglicherweise auch fest, dass ich 635px für die Höhe verwende. Probieren Sie es selbst aus, die Fensterhöhe beträgt eigentlich 635px. Führen Sie den iOS-Simulator für iPhone X aus und tun Sie in Safari Web Inspector window.innerHeight. Hier sind ein paar nützliche Links zu diesem Thema:

6
Sam Sedighian

Es scheint, dass die präziseste (und nahtlose) Methode zum Hinzufügen des Auffüllens 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/

0
Wasif Ibrahim