iPhone 5 CSS media query

Jest to, co przypisuję temu blogowi :

@media only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone 5 only */
}

Należy pamiętać, że reaguje na iPhone 5, a nie na konkretną wersję iOS zainstalowaną na tym urządzeniu.

Aby połączyć się z istniejącą wersją, powinieneś móc rozdzielać je przecinkami:

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

uwaga: nie testowałem powyższego kodu, ale wcześniej testowałem zapytania rozdzielane przecinkami @media i działają dobrze.

Zauważ, że powyższe może trafić na inne urządzenia, które mają podobne proporcje, takie jak Galaxy Nexus. Oto dodatkowa metoda, która będzie kierowana tylko do urządzeń, które mają jeden wymiar 640px (560px z powodu dziwnych anomalii wyświetlania pikseli) i jeden z pomiędzy 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 */
}

Wszystkie te odpowiedzi wymienione powyżej, które używają max-device-width lub max-device-height do zapytań o media, cierpią z powodu bardzo silnego błędu: są również skierowane do wielu innych popularnych urządzeń mobilnych (prawdopodobnie niechciane i nigdy nie testowane, lub które trafią na rynek w przyszłości).

Te zapytania będą działać dla każdego urządzenia, które ma mniejszy ekran {[7] } i prawdopodobnie twój projekt zostanie uszkodzony.

W połączeniu z podobnymi zapytaniami o media specyficzne dla urządzenia (dla HTC, Samsung, IPod, Nexus...) ta praktyka będzie wystrzelić bombę zegarową. W przypadku debugowania ten pomysł może sprawić, że Twój CSS stanie się niekontrolowanym spagetti. Nigdy nie można przetestować wszystkich możliwych urządzeń.

Należy pamiętać, że jedynym zapytaniem o media zawsze kierującym IPhone5 i nic więcej, jest:

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

Zauważ, że sprawdzana jest dokładna szerokość i wysokość, a nie maksymalna szerokość.

/* wzór degradacji sprawdzamy tylko szerokość ekranu oczywiście, to się zmieni, gdy zmieni się widok z pionowego na krajobrazowy* /

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

Jeśli więcej niż 30% odwiedzających Twoją witrynę pochodzi z urządzeń mobilnych, Odwróć ten schemat do góry nogami, zapewniając podejście mobilne. Użyj min-device-width w takim przypadku. Przyspieszy to renderowanie stron internetowych dla przeglądarek mobilnych.

Dla mnie zapytanie, które wykonało zadanie brzmiało:

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

IPhone 5 w pionie i krajobrazie

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {

/* styles*/
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { 
/* styles*/

}

IPhone 5 w portrecie

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { 
 /* styles*/

}

Żadna z odpowiedzi nie działa dla mnie kierowanie aplikacji phonegapp.

Jak wskazuje poniższy link , poniższe rozwiązanie działa.

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

Tylko bardzo szybki dodatek, ponieważ testowałem kilka opcji i przegapiłem to po drodze. Upewnij się, że Twoja strona ma:

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

Możesz dość łatwo uzyskać odpowiedź na iPhone5 wraz z innymi smartfonami w bazie funkcji multimedialnych dla urządzeń mobilnych:

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

Możesz nawet uzyskać własne wartości urządzenia na stronie testowej w tej samej witrynie.

(Disclaimer: This is my website)

Afaik no iPhone uses A pixel-ratio of 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) { 

    }
}

Może powinieneś obniżyć "-webkit-min-device-pixel-ratio "do 1.5, aby złapać wszystkie iPhone' y ?

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