Медиа-запрос CSS для iPhone 5

IPhone 5 имеет более длинный экран, и он не улавливает мобильный вид моего сайта. Каковы новые адаптивные дизайнерские запросы для iPhone 5 и можно ли их комбинировать с существующими запросами iPhone?

Мой текущий медиа-запрос таков:

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

Еще одна полезная функция мультимедиа device-aspect-ratio.

Обратите внимание, что у iPhone 5 соотношение сторон экрана не 16: 9 . Фактически это 40:71.

iPhone <5:
@media screen and (device-aspect-ratio: 2/3) {}

iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}

Айфон 6:
@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}

IPAD:
@media screen and (device-aspect-ratio: 3/4) {}

Справка:
Media Queries @ W3C
iPhone Сравнение моделей
Aspect Ratio Calculator

Есть то, что я отдаю должное этому блогу :

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 5 only */
}

Имейте в виду, что он реагирует на iPhone 5, а не на конкретную версию iOS, установленную на указанном устройстве.

Чтобы объединиться с существующей версией, вы должны иметь возможность разделять их запятыми:

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
}

NB: я не тестировал приведенный выше код, но раньше я тестировал @mediaзапросы с разделителями-запятыми , и они работают нормально.

Обратите внимание, что вышеперечисленное может затронуть некоторые другие устройства, которые имеют аналогичные соотношения, такие как Galaxy Nexus. Вот дополнительный метод, который будет нацелен только на устройства с одним размером 640 пикселей (560 пикселей из-за некоторых странных аномалий отображения пикселей) и одним размером от 960 пикселей (iPhone <5) до 1136 пикселей (iPhone 5).

@media
    only screen and (max-device-width: 1136px) and (min-device-width: 960px) and (max-device-height: 640px) and (min-device-height: 560px),
    only screen and (max-device-height: 1136px) and (min-device-height: 960px) and (max-device-width: 640px) and (min-device-width: 560px) {
    /* iPhone only */
}

Все перечисленные выше ответы, которые используют max-device-widthили max-device-heightдля медиазапросов, страдают от очень сильной ошибки: они также нацелены на множество других популярных мобильных устройств (вероятно, нежелательных и никогда не тестируемых, или которые появятся на рынке в будущем).

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

В сочетании с подобными медиа-запросами для конкретных устройств (для HTC, Samsung, IPod, Nexus ...) эта практика создаст бомбу замедленного действия. Для отладки эта идея может сделать ваш CSS неуправляемым спагетти. Вы никогда не сможете протестировать все возможные устройства.

Имейте в виду, что единственный медиа-запрос, всегда нацеленный на IPhone5 и ни на что другое , это:

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

Обратите внимание, что здесь проверяется точная ширина и высота, а не максимальная ширина.

Теперь, каково решение? Если вы хотите написать веб-страницу, которая будет хорошо выглядеть на всех возможных устройствах, лучше всего использовать деградацию

/ * шаблон деградации мы проверяем только ширину экрана, это изменится при повороте из портретного в ландшафтный режим * /

/*css for desktops here*/

@media (max-device-width: 1024px) {
  /*IPad portrait AND netbooks, AND anything with smaller screen*/
  /*make the design flexible if possible */
  /*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
 /*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
 /*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
 /*IPhone portrait and smaller. You can probably stop on 320px*/
}

Если более 30% посетителей вашего сайта приходят с мобильных устройств, переверните эту схему с ног на голову, предоставив подход, ориентированный на мобильные устройства. Используйте min-device-widthв этом случае. Это ускорит рендеринг веб-страницы для мобильных браузеров.

для меня запрос, который выполнил эту работу, был:

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)

iPhone 5 в портретной и альбомной ориентации

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

/* styles*/
}

iPhone 5 в альбомной ориентации

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* styles*/

}

iPhone 5 в портретной

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
 /* styles*/

}

Ни один из ответов не работает для меня, ориентированного на приложение phonegapp.

Как указывает следующая ссылка , приведенное ниже решение работает.

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}

Просто очень быстрое дополнение, так как я тестировал несколько вариантов и пропустил это по пути. Убедитесь, что на вашей странице есть:

<meta name="viewport" content="initial-scale=1.0">

Вы можете довольно легко получить свой ответ для iPhone5 вместе с другими смартфонами в базе данных мультимедийных функций для мобильных устройств:

http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

Вы даже можете получить собственные значения устройства на тестовой странице того же веб-сайта.

(Отказ от ответственности: это мой сайт)

afaik no iPhone использует соотношение пикселей 1,5

iPhone 3G / 3GS: (-webkit-device-pixel-ratio: 1) iPhone 4G / 4GS / 5G: (-webkit-device-pixel-ratio: 2)

/* iPad */
@media screen and (min-device-width: 768px) {
    /* ipad-portrait */
    @media screen and (max-width: 896px) { 
        .logo{
            display: none !important;
        }
    }
    /* ipad-landscape */
    @media screen and (min-width: 897px) { 

    }
}
/* iPhone */
@media screen and (max-device-width: 480px) {
    /* iphone-portrait */
    @media screen and (max-width: 400px) { 

    }
    /* iphone-landscape */
    @media screen and (min-width: 401px) { 

    }
}

Вам, может быть, стоит снизить "-webkit-min-device-pixel-ratio" до 1,5, чтобы охватить все iPhone?

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 1.5) {
/* iPhone only */
}