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

есть это, что я считаюэтот блог:

@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

@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 нет iPhone использует соотношение пикселей 1,5

iPhone 3G / 3GS: (- webkit-устройство-пиксель-соотношение: 1) iPhone 4G / 4GS / 5G: (- webkit-устройство-пиксель-соотношение: 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, чтобы поймать все айфоны ?

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