iPhone 6

• пейзаж

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

  если вы предпочитаете, вы можете использовать (device-width : 375px) и (device-height: 559px) вместо min- и max- настройки.

  нет необходимости использовать все эти настройки, и это не все возможные настройки. Это только большинство возможных вариантов, так что вы можете выбрать и выбрать те, которые соответствуют вашим по необходимости.

• User Agent

  протестировано с моим iPhone 6 (модель MG6G2LL/A) с 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
  

• запуск изображения

  • 750 x 1334 (@2x) для портрета
  • 1334 x 750 (@2x) для ландшафта

• значок приложения

  • 120 x 120

---

iPhone 6+

• пейзаж

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

• запуск изображения

  • 1242 x 2208 (@3x) для портрета
  • 2208 x 1242 (@3x) для ландшафта

• значок приложения

  • 180 x 180

---

iPhone 6 и 6+

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

---

предсказал

по данным веб-сайт Apple iPhone 6 Plus будет иметь 401 пикселей на дюйм и будет 1920 x 1080. Уменьшенная версия iPhone 6 будет 1334 x 750 с 326 PPI.

Итак, предполагая, что информация верна, мы можем написать медиа-запрос для 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) 
{ }

отметим, что устройство-соотношение сторон будет прекращена в http://dev.w3.org/csswg/mediaqueries-4/ и заменено на аспект-соотношение

мин-width и Max-ширина может быть что-то вроде 1704 х 960.

---

Apple Watch (спекулятивный)

спецификации на часах все еще немного спекулятивны, так как (насколько мне известно) еще не было официального спецификации. Но Apple действительно упоминала в пресс-релизе, что часы будут доступны в двух размерах.. 38мм и 42мм.

далее, принимая.. что эти размеры относятся к размеру экрана, а не общий размер циферблата эти медиа-запросы должны работать.. И я уверен, что вы могли бы дать или взять несколько миллиметров, чтобы покрыть любой сценарий, не жертвуя никаким нежелательным таргетингом, потому что..

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

или

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

стоит отметить, что Медиа Запросы Уровень 4 из W3C в настоящее время доступен только в качестве первого публичного проекта, как только он будет доступен для использования принесет с собой много новых функций, разработанных с небольших носимых устройств, как это в виду.