Welche CSS-Medienabfragen entsprechen den neuen Geräten von Apple? Ich brauche die eingestellt body
ist background-color
die X sichere Bereich Hintergrundfarbe zu ändern.
76
Welche CSS-Medienabfragen entsprechen den neuen Geräten von Apple? Ich brauche die eingestellt body
ist background-color
die X sichere Bereich Hintergrundfarbe zu ändern.
@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) { }
@media only screen
and (device-width : 375px)
and (device-height : 667px)
and (-webkit-device-pixel-ratio : 2) { }
@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:
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
.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) { }
quelle
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-width
und 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:quelle
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/
quelle
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-width
Fall 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_queries
hover
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 richtighover
; 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:quelle