Comment puis-je utiliser les requêtes multimédias pour optimiser mon site Web pour iPhone 6 et iPhone 6 Plus ?

Requêtes multimédias pour iPhone 6 et 6 Plus : un guide complet

Que vous soyez un développeur iOS chevronné ou tout juste débutant, c'est essentiel pour optimiser vos applications pour les différentes tailles d'écran trouvées dans l'écosystème des appareils mobiles d'Apple. Parmi les ajouts les plus récents à cette gamme figurent les iPhone 6 et 6 Plus. Pour garantir que vos applications s'adaptent parfaitement à ces appareils, cet article fournit des conseils détaillés sur les tailles d'écran spécifiques et les requêtes multimédias que vous devez cibler.

iPhone 6

Avec un Avec une taille d'écran de 375 x 667 pixels et une résolution de 1334 x 750, l'iPhone 6 offre un affichage plus large que son prédécesseur. Voici les requêtes média correspondantes pour optimiser votre contenu :

@media only screen 
    and (min-device-width : 375px) // or 213.4375em or 3in or 9cm
    and (max-device-width : 667px) // or 41.6875em
    and (width : 667px) // or 41.6875em
    and (height : 375px) // or 23.4375em
    and (orientation : landscape) 
    and (color : 8)
    and (device-aspect-ratio : 375/667)
    and (aspect-ratio : 667/375)
    and (device-pixel-ratio : 2)
    and (-webkit-min-device-pixel-ratio : 2)
{ }

@media only screen 
    and (min-device-width : 375px) // or 213.4375em
    and (max-device-width : 667px) // or 41.6875em
    and (width : 375px) // or 23.4375em
    and (height : 559px) // or 34.9375em
    and (orientation : portrait) 
    and (color : 8)
    and (device-aspect-ratio : 375/667)
    and (aspect-ratio : 375/559)
    and (device-pixel-ratio : 2)
    and (-webkit-min-device-pixel-ratio : 2)
{ }

iPhone 6 Plus

Le plus grand iPhone 6 Plus dispose d'une taille d'écran généreuse de 414 x 736 pixels. et une résolution de 1920 x 1080. Utilisez ces requêtes multimédias pour personnaliser votre contenu :

@media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 3) 
{ }

@media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px)
    and (device-width : 414px)
    and (device-height : 736px)
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 3) 
    and (-webkit-device-pixel-ratio : 3)
{ }

Cibler les iPhone 6 et 6 Plus

Si vous souhaitez prendre en charge les deux modèles d'iPhone simultanément, utilisez la requête média suivante :

@media only screen 
    and (max-device-width: 640px), 
    only screen and (max-device-width: 667px), 
    only screen and (max-width: 480px)
{ }

Supplémentaire Considérations

Requêtes multimédias prévues pour les prochains modèles d'iPhone

Selon Apple, les futurs modèles d'iPhone pourraient comporter des écrans avec des résolutions encore plus élevées. Sur la base de ces prédictions, envisagez d'intégrer ces requêtes média dans votre stratégie d'optimisation à long terme :

@media screen 
    and (min-device-width : 1080px) 
    and (max-device-width : 1920px) 
    and (min-resolution: 401dpi) 
    and (device-aspect-ratio:16/9) 
{ }

@media screen 
    and (min-device-width : 750px) 
    and (max-device-width : 1334px) 
    and (min-resolution: 326dpi) 
{ }

Requêtes média pour Apple Watch (spéculative)

Alors que l'exact les spécifications de l'Apple Watch sont encore un peu floues, sur la base des tailles d'écran connues, ces requêtes multimédias peuvent s'avérer utile :

@media (!small) and (damn-small), (omfg) { }

@media 
    (max-device-width:42mm) 
    and (min-device-width:38mm) 
{ }

À mesure que le marché des appareils portables évolue, Media Queries niveau 4 améliorera encore votre capacité à cibler des appareils et des facteurs de forme spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!