IPhone 5 имеет более длинный экран, и он не улавливает мобильный вид моего сайта. Каковы новые адаптивные дизайнерские запросы для iPhone 5 и можно ли их комбинировать с существующими запросами iPhone?
Мой текущий медиа-запрос таков:
@media only screen and (max-device-width: 480px) {}
iphone
css
responsive-design
media-queries
iphone-5
инакомыслящий
источник
источник
Ответы:
Еще одна полезная функция мультимедиа
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
источник
and (-webkit-min-device-pixel-ratio: 2)
медиа-запрос iPhone 5, чтобы он работал в веб-просмотре PhoneGap, как заявил @TaeKwonJoeЕсть то, что я отдаю должное этому блогу :
Имейте в виду, что он реагирует на iPhone 5, а не на конкретную версию iOS, установленную на указанном устройстве.
Чтобы объединиться с существующей версией, вы должны иметь возможность разделять их запятыми:
NB: я не тестировал приведенный выше код, но раньше я тестировал
@media
запросы с разделителями-запятыми , и они работают нормально.Обратите внимание, что вышеперечисленное может затронуть некоторые другие устройства, которые имеют аналогичные соотношения, такие как Galaxy Nexus. Вот дополнительный метод, который будет нацелен только на устройства с одним размером 640 пикселей (560 пикселей из-за некоторых странных аномалий отображения пикселей) и одним размером от 960 пикселей (iPhone <5) до 1136 пикселей (iPhone 5).
источник
iPhone 5 and not to iOS 6
? Должно быть: «iPhone5, а не iPhone 6»?Все перечисленные выше ответы, которые используют
max-device-width
илиmax-device-height
для медиазапросов, страдают от очень сильной ошибки: они также нацелены на множество других популярных мобильных устройств (вероятно, нежелательных и никогда не тестируемых, или которые появятся на рынке в будущем).Эти запросы будут работать для любого устройства с меньшим экраном , и, вероятно, ваш дизайн будет сломан.
В сочетании с подобными медиа-запросами для конкретных устройств (для HTC, Samsung, IPod, Nexus ...) эта практика создаст бомбу замедленного действия. Для отладки эта идея может сделать ваш CSS неуправляемым спагетти. Вы никогда не сможете протестировать все возможные устройства.
Имейте в виду, что единственный медиа-запрос, всегда нацеленный на IPhone5 и ни на что другое , это:
Обратите внимание, что здесь проверяется точная ширина и высота, а не максимальная ширина.
Теперь, каково решение? Если вы хотите написать веб-страницу, которая будет хорошо выглядеть на всех возможных устройствах, лучше всего использовать деградацию
/ * шаблон деградации мы проверяем только ширину экрана, это изменится при повороте из портретного в ландшафтный режим * /
Если более 30% посетителей вашего сайта приходят с мобильных устройств, переверните эту схему с ног на голову, предоставив подход, ориентированный на мобильные устройства. Используйте
min-device-width
в этом случае. Это ускорит рендеринг веб-страницы для мобильных браузеров.источник
для меня запрос, который выполнил эту работу, был:
источник
iPhone 5 в портретной и альбомной ориентации
iPhone 5 в альбомной ориентации
iPhone 5 в портретной
источник
max-device-width : 568px
портрет?device-width: 320px and device-height: 568px
вместо этого?Ни один из ответов не работает для меня, ориентированного на приложение phonegapp.
Как указывает следующая ссылка , приведенное ниже решение работает.
источник
Просто очень быстрое дополнение, так как я тестировал несколько вариантов и пропустил это по пути. Убедитесь, что на вашей странице есть:
источник
Вы можете довольно легко получить свой ответ для 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)
источник
источник
Вам, может быть, стоит снизить "-webkit-min-device-pixel-ratio" до 1,5, чтобы охватить все iPhone?
источник