Les requêtes multimédias pour iPhone 6 et 6 plus

Les requêtes multimédias spécifiques peuvent être utilisées pour cibler des périphériques tels que les iPhone 6 et 6 Plus. Ces requêtes utilisent divers paramètres pour identifier avec précision les périphériques ciblés en fonction de leurs tailles d'écran, de leurs résolutions et d'autres caractéristiques spécifiques aux appareils. employé:

paysage

@ media uniquement écran et (Min-Device-Width: 375px) et (max-appareils-largeur: 667px) et (orientation: paysage) et (-webkit-min-device-pixel-ratio: 2) {}

• portrait

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

• Lancez des images
  portrait: 750 x 1334 (@ 2x)

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

  paysage: 1334 x 750 (@ 2x)
• App icon: 120 x 120
• pour l'iPhone 6 Plus, utilisez ces requêtes multimédias:

paysage

• portrait
  @ media uniquement écran et (Min-Device-Width: 414px) et (max-apparence: 736px) et (orientation: portrait) et (-webkit-min-device-pixel-ratio: 3) {}

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

lance des images

• portrait: 1242 x 2208 (@ 3x)

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

app icon: 180 x 180
• et 6 plus
pour cibler les appareils iPhone 6 et 6 Plus, vous pouvez utiliser la requête suivante:
@ média uniquement écran et (max-apparence-largeur: 640px), SEULEMENT ÉCRAN ET (MAX-DIVICE-WIDTH: 667PX), Seulement écran et (largeur maximale: 480px) {}

Prédiction de périphérique pour les versions futures

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

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

iPhone 7 (prédit): @ écran multimédia et (Min-Device-Width: 1080px) et (max-apparence de l'appareil: 1920px) et (résolution min: 401dpi) et (device-aspect-ratio: 16/9) {} Écran @Media et (Min-Device-Width: 750px) et (max-apparence: 1334px) et (résolution min: 326dpi) {}

Apple watch (spéculatif):
• en supposant une taille d'écran autour de 40mm-42mm:
  @ media (largeur de l'appareil maximum: 42 mm) et (Min-Device-Width: 38 mm) {}

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