Отзывчивые точки останова iPhone 6 и 6 Plus

Согласно сайту Apple:

iPhone 6 имеет разрешение 1334 на 750 пикселей при 326 ppi с коэффициентом контрастности 1400: 1 (типичный)

iPhone 6+ имеет разрешение 1920 x 1080 пикселей при 401 ppi с коэффициентом контрастности 1300: 1 (типичный)

Тем не менее, что будет требовать, чтобы пользовательские точки прерывания CSS запрашивали для каждой точки? (портрет и пейзаж)

Я не совсем понимаю, как тестировать размеры экрана сетчатки, используя различные адаптивные эмуляторы. Любая помощь приветствуется.

Ответы

Ответ 1

Вы ссылаетесь на физические пиксели устройства, а не на размеры css device-width. В соответствии с этим tweet ширина устройства для этих двух будет:

iPhone 6: 375px (2.0 DPR)
iPhone 6 Plus: 414px (2.6 DPR)

Зная, что (и предполагая, что твит правильно), и предположив, что вы используете правильный тег meta viewport, вы смотрите примерно:

iPhone 6: 375px (portrait), 667px (landscape)
iPhone 6 Plus: 414 (portrait), 736px (landscape)

Надеюсь, это поможет!

Edit:

Что касается 2.6 DPR iPhone 6 Plus, на самом деле 3.0 DPR сокращено на 1.15, что приводит к 2.6 DPR. Более подробную информацию можно найти на http://www.paintcodeapp.com/news/iphone-6-screens-demystified для разъяснения (спасибо @mdcarter за ссылку!)

Ответ 2

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


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


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


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { 
    /* iPhone 6+ 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 and landscape */
}

@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+ portrait */
}

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

Вы можете получить список медиа-запросов для всех стандартных устройств здесь