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

132

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

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

@media only screen and (max-device-width: 480px) {}
инакомыслящий
источник
3
Можем ли мы увидеть ваши существующие медиа-запросы?
BoltClock
Попробуй это? halgatewood.com/iphone-5-media-query
sachleen

Ответы:

283

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

2C-B,
источник
2
Мне нравится этот подход, но я не мог заставить его работать в веб-просмотре приложения PhoneGap, пока не добавил -webkit-min-device-pixel-ratio, как объяснил Стивен Спраул zsprawl.com/iOS/2012/09/css-media-queries-for -The-iphone-5 . @media screen и (device-aspect-ratio: 40/71) and (-webkit-min-device-pixel-ratio: 2) {// iphone5 for teh phonegaps}
TaeKwonJoe
Мне пришлось добавить and (-webkit-min-device-pixel-ratio: 2)медиа-запрос iPhone 5, чтобы он работал в веб-просмотре PhoneGap, как заявил @TaeKwonJoe
Махендра Лия
1
Спасибо за обновление, чтобы включить iPhone 6!
Maverick
Это работает очень хорошо, когда мне нужно различать iphone 4 и iphone 5 в css.
euccas 02
1
Для iphone 6 (соотношение сторон устройства: 667/375) не работало на реальном физическом iphone 6. Однако оно работало на симуляторе iOS. Я изменил его на 375/667, и он работал на физическом устройстве.
делать то, что сейчас
64

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

@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 */
}
Эрик
источник
1
Можете ли вы предложить, как я мог бы объединить этот запрос со своим старым, чтобы поймать и iPhone 4 и 5?
Maverick
6
Будьте осторожны, так как это повлияет и на другие телефоны, а не только на айфоны. Примером является Samsung Galaxy Nexus.
Майк Суини
@MikeSweeney Хороший звонок. Я обновил свой пост новым методом, который не должен включать другие устройства.
Эрик
@Eric Это почти то, на чем я остановился после множества тестов на разных телефонах - мне нужно было добавить высоты! Кажется, отлично работает на 7-8 различных телефонах, на которых я тестировал.
Майк Суини
эта линия правильная: iPhone 5 and not to iOS 6? Должно быть: «iPhone5, а не iPhone 6»?
Sgnl
38

Все перечисленные выше ответы, которые используют 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в этом случае. Это ускорит рендеринг веб-страницы для мобильных браузеров.

Дэн
источник
10
Я бы сначала пошел на прогрессивные улучшения и мобильные устройства. Это начинается с мобильного и накапливается с использованием min-device-width.
primavera133
2
Также обратите внимание, что решение высоты / ширины / соотношения пикселей, которое соответствует только iPhone 5, также будет соответствовать следующему телефону, который имеет те же характеристики. Общая тема вашего ответа верна: думать о конкретных устройствах - это неправильный путь.
Pointy
@Dan - даже если ваш ответ не имеет прямого отношения к вопросу, он рассматривает его в более широкой перспективе лучших практик адаптивного дизайна. То, что вы здесь написали, на мой взгляд, очень глубокое и практичное. Пять звезд.
Димитрий Воронцов
@Dan - пытаюсь реализовать ваше предложение, что-то не работает. Могу я попросить вас взглянуть: stackoverflow.com/questions/16486078/…
Дмитрий Воронцов
@primavera, скажите почему. В чем преимущество мобильного первого подхода?
С ..
7

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

only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)
философия эли
источник
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*/

}
Sudheer
источник
Зачем нужен max-device-width : 568pxпортрет?
adi518
1
@ adi518, если вы не используете max-width, тогда правила css применяются для любого устройства больше 320 пикселей, что похоже на буквально большинство устройств - настольные компьютеры планшетов и т. д.
Судхир
1
Почему бы не использовать device-width: 320px and device-height: 568pxвместо этого?
adi518
5

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

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

@media screen and (device-height: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    // css here
}
ppcano
источник
5

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

<meta name="viewport" content="initial-scale=1.0">
Майк Уэллс
источник
3

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

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

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

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

pieroxy
источник
0

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

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

noreabu
источник
0
/* 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) { 

    }
}
Артур Яковлев
источник
-3

Вам, может быть, стоит снизить "-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 */
}
Genesor
источник
1
Какой iPhone использует соотношение пикселей устройства 1,5?
BoltClock
1
Я настоятельно рекомендую делать медиа-запросы в зависимости от ширины устройства, а не имени устройства (iPhone). Так что, если iPhone 5 имеет большую ширину, просто сделайте это пригодным для использования.
Tom Roggero