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

Кто-нибудь знает конкретные размеры экрана для целевых медиа-запросов для iPhone 6 и 6 Plus?

Кроме того, размеры значков и экраны заставки?

Ответы

Ответ 1

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-.

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

  • Пользовательский агент

    протестирован с моим 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) 
{ }

Обратите внимание, что device-aspect-ratio будет устаревшим в http://dev.w3.org/csswg/mediaqueries-4/ и заменить на aspect-ratio

Минимальная ширина и максимальная ширина могут быть примерно 1704 x 960.

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

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

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

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

или

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

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

Ответ 2

Это то, что сейчас работает для меня:

iPhone 6

@media only screen and (max-device-width: 667px) 
    and (-webkit-device-pixel-ratio: 2) {

iPhone 6 +

@media screen and (min-device-width : 414px) 
    and (-webkit-device-pixel-ratio: 3)

Ответ 3

Это работает для меня для iphone 6

/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 

}

/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 

}

/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { 

}

/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { 

}

/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 
}

/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){ 

}

/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){ 

}

Ответ 4

Просто чтобы вы знали, что iPhone 6 лежит вокруг него min-width. Он думает, что это 320, а не 375, как предполагается.

@media only screen and (max-device-width: 667px) 
and (-webkit-device-pixel-ratio: 2) {

}

Это было единственное, что я мог найти, чтобы настроить таргетинг на iPhone 6. 6+ отлично работает с этим методом:

@media screen and (min-device-width : 414px) 
and (max-device-height : 736px) and (max-resolution: 401dpi)
{

}

Ответ 5

Вы должны настроить размер экрана с помощью мультимедийного запроса для разного размера экрана.

для iphone:

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

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

и для настольной версии:

@media only screen (max-width: 1080){

}