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) {}
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
Калькулятор соотношения сторон
Вот это, на что я благодарен этот блог:
@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 */
}
Все эти ответы, перечисленные выше, которые используют 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 в этом случае. Это ускорит отображение веб-страниц для мобильных браузеров.
для меня запрос, выполнивший задание, был:
only screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)
Ни один из ответов не работает для меня, ориентированного на приложение 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">
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*/
}
Вы можете легко получить свой ответ для 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 */
}