Comment puis-je utiliser les requêtes multimédias pour cibler les iPhone 6, 6 Plus et les futurs appareils Apple ?

Requêtes multimédias pour iPhone 6 et 6 Plus

Des requêtes multimédias spécifiques peuvent être utilisées pour cibler des appareils tels que l'iPhone 6 et 6 Plus. Ces requêtes utilisent divers paramètres pour identifier avec précision les appareils ciblés en fonction de la taille de leur écran, de leur résolution et d'autres caractéristiques spécifiques à l'appareil.

Requêtes iPhone 6

Pour l'iPhone 6, les requêtes multimédias suivantes peuvent être employé :

• Paysage

  @media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 2) 
  { }

• Portrait

  @media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px)
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 2) 
  { }

• Images de lancement
• Portrait : 750 x 1334 (@2x)
• Paysage : 1334 x 750 (@2x)
• Icône de l'application : 120 x 120

Requêtes iPhone 6 Plus

Pour l'iPhone 6 Plus, utilisez ces supports requêtes :

• Paysage

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

• Portrait

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

• Images de lancement
• Portrait : 1242 x 2208 (@3x)
• Paysage : 2208 x 1242 (@3x)
• Icône de l'application : 180 x 180

Requêtes générales pour iPhone 6 et 6 Plus

Pour cibler à la fois les appareils iPhone 6 et 6 Plus, vous peut utiliser la requête suivante :

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

Prédiction des appareils pour les versions futures

Apple a publié des informations limitées concernant les futurs appareils, tels que l'iPhone 7 et l'Apple Watch. Cependant, sur la base des spécifications de l'iPhone 6 et 6 Plus et en supposant des conventions de dénomination similaires, les requêtes multimédias suivantes pourraient être utiles à l'avenir :

• iPhone 7 (prédit) :

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

• Apple Watch (spéculative) :
  En supposant une taille d'écran d'environ 40mm-42mm :

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

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!