IPhone 5 CSS-медиа-запрос

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

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

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

Ответ 1

Еще одна полезная функция мультимедиа - 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) {}

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

Ссылка:
Медиа-запросы @W3C

Сравнение моделей iPhone

Калькулятор соотношения сторон

Ответ 2

Вот это, на что я благодарен этот блог:

@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. Вот дополнительный метод, который будет нацелен только на устройства с одним размером 640px (560px из-за некоторые странные аномалии отображения-пикселя) и один из 960px (iPhone < 5) и 1136px (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 */
}

Ответ 3

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

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

В сочетании с аналогичными мультимедийными запросами устройств (для HTC, Samsung, IPod, Nexus...) эта практика запустит бомбу замедленного действия. Для debigging эта идея может сделать ваш 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*/
}

Обратите внимание, что здесь указана точная ширина и высота, а не max-width.


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

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

/*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 в этом случае. Это ускорит отображение веб-страниц для мобильных браузеров.

Ответ 4

для меня запрос, выполнивший задание, был:

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

Ответ 5

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

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

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

Ответ 6

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

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

Ответ 7

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*/

}

Ответ 8

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

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

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

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

Ответ 9

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

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

Ответ 10

/* 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) { 

    }
}

Ответ 11

Возможно, вы должны уменьшить "-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 */
}