Quelles sont les requêtes de média CSS correspondant aux nouveaux périphériques d'Apple? J'ai besoin de régler le body
background-color
pour changer la couleur de fond de la zone de sécurité du X.Requêtes multimédia CSS pour l'iPhone X/8/8 Plus
17
A
Répondre
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 + partagent les mêmes tailles, tandis que l'iPhone 7/8 fait aussi.
Vous cherchez une orientation spécifique?
Portrait
Ajouter la règle suivante:
and (orientation : portrait)
Paysage
Ajouter la règle suivante:
and (orientation : landscape)
Références:
3
Voici quelques-unes des requêtes média suivantes pour iphones. lien Ref 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) { }
Vous devez ajouter des références, par exemple: Liens vers d'autres SO réponses si vous les avez copiés. – nathan
@nathan réponse mise à jour. –