iPhone 6

• Paysage

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

• Portrait

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

  si vous préférez, vous pouvez utiliser (device-width : 375px) et (device-height: 559px) à la place des paramètres min- et max- .

  Il n'est pas nécessaire d'utiliser l'ensemble de ces paramètres, et ce ne sont pas tous les possibles paramètre. Ce sont juste la majorité des options possibles de sorte que vous pouvez choisir et choisir celles qui répondent à vos besoins.

• User Agent

  testé avec mon iPhone 6 (Modèle MG6G2LL / A) avec iOS 9.0 (13A4305g)

  # Safari
  Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.39 (KHTML, like Gecko) Version/9.0 Mobile/13A4305g Safari 601.1
  # Google Chrome
  Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_3) AppleWebKit/534.53.11 (KHTML, like Gecko) Version/5.1.3 Safari/534.53.10 (000102)
  # Mercury
  Mozilla/5.0 (iPhone; CPU iPhone OS 7_0_4 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11B554a Safari/9537.53
  

• Lancement d'images

  • 750 x 1334 (@2x) pour portrait
  • 1334 x 750 (@2x) pour paysage

• icône de l'Application

  • 120 x 120

---

iPhone 6 +

• 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 (device-width : 414px)
      and (device-height : 736px)
      and (orientation : portrait) 
      and (-webkit-min-device-pixel-ratio : 3) 
      and (-webkit-device-pixel-ratio : 3)
  { }
  

• images de lancement

  • 1242 x 2208 (@3x) pour portrait
  • 2208 x 1242 (@3x) pour paysage

• icône de l'Application

  • 180 x 180

---

iPhone 6 et 6+

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

---

prévu

selon le site Web D'Apple l'iPhone 6 Plus aura 401 pixels par pouce et sera 1920 x 1080. La version plus petite de l'iPhone 6 sera 1334 x 750 avec 326 PPI.

donc, en supposant que l'information est correcte, Nous pouvons écrire une requête média pour l'iPhone 6:

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

noter que dispositif-rapport d'aspect sera déprécié dans http://dev.w3.org/csswg/mediaqueries-4 / et remplacé par rapport d'aspect

Min-width et max-width peut être quelque chose comme 1704 x 960.

---

Apple Watch (speculative)

Caractéristiques de la Montre sont encore un peu spéculative depuis (pour autant que je suis au courant) il n'y a pas eu d'officiel fiche technique encore. Mais Apple a mentionné dans ce communiqué de presse que la Montre sera disponible en deux tailles.. 38mm et 42mm.

autre supposition.. que ces tailles se réfèrent à la taille de l'écran plutôt que la taille globale de la montre face ces requêtes médias devraient fonctionner.. Et je suis sûr que vous pourriez donner ou prendre quelques millimètres pour couvrir le scénario sans sacrifier indésirables ciblage parce que..

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

ou

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

il est intéressant de noter que Media Queries Level 4 du W3C actuellement disponible seulement comme un premier projet public, une fois disponible pour l'utilisation apportera avec elle un grand nombre de nouvelles fonctionnalités conçues avec des appareils plus petits portables comme celui-ci à l'esprit.