Media Запросы для iPhone 6 и 6 Plus

конкретные медиа -запросы могут использоваться для целевых устройств, таких как iPhone 6 и 6 Plus. Эти запросы используют различные параметры для точного идентификации целевых устройств на основе их размеров экрана, разрешений и других характеристик, специфичных для устройства. используется:

Landscape

@Media Only Screen и (минимальная ширина: 375px) и (максимальная ширина: 667px) и (ориентация: пейзаж) и (-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) 
  { }

• запустить Images

  ]

  портрет: 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) 
  { }

  landscape: 1334 x 750 (@2x)
• app: 120 x 120
для iPhone 6 Plus используйте эти медиа -запросы:
Landscape

@Media. и (минимальная ширина: 414px) и (максимальная ширина: 736px) и (ориентация: пейзаж) и (-Webkit-min-device-pixel-ratio: 3) {}

portrait

@Media Only Screen и (минимальная ширина: 414px) и (максимальная ширина: 736px) и (ориентация: портрет) и (-Webkit-min-device-pixel-ratio: 3) {}

• запустить Images

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

  портрет: 1242 x 2208 (@3x)
• Landscape: 2208 x 1242 (@3x)
  apper: 180 x 180

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

• для нацеливания как на iPhone 6, так и 6 Plus, вы можете использовать следующий запрос:
• @СМИ. и (максимальная ширина: 640px), Только экран и (максимальная ширина: 667px), Только экран и (максимальная ширина: 480px) {}
Прогнозирование устройства для будущих выпусков

Apple выпустила ограниченную информацию о будущих устройствах, такую ​​как iPhone 7 и Apple Watch. Однако, основываясь на технических характеристиках iPhone 6 и 6 Plus и предполагающих аналогичных соглашений о именовании, следующие медиа -запросы могут быть полезны в будущем:

iPhone 7 (прогнозировано):

@Media Screen и (минимальная ширина: 1080px) и (максимальная ширина: 1920px) и (Мин-разрешение: 401DPI) и (устройство-асплекжение-Ratio: 16/9) {} @Media Screen и (ширина мин-девице: 750px) и (максимальная ширина: 1334px) и (Мин-разрешение: 326DPI) {}

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

Apple Watch (Speculative): , если размер экрана около 40 мм-42 мм:

@Media (ширина максимума: 42 мм) и (минимальная ширина: 38 мм) {}

• ]