Zapytanie o media CSS dla iPhone'a 5

IPhone 5 ma dłuższy ekran i nie łapie mobilnego widoku mojej witryny. Jakie są nowe responsywne zapytania projektowe dla iPhone'a 5 i czy mogę łączyć z istniejącymi zapytaniami dotyczącymi iPhone'a?

Moje aktualne zapytanie o media jest takie:

@media only screen and (max-device-width: 480px) {}

Inną przydatną funkcją multimedialną jest device-aspect-ratio.

Zauważ, że iPhone 5 nie ma proporcji 16: 9 . W rzeczywistości jest to 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) {}

Źródła:
Media Queries @ W3C
iPhone Model Porównanie
proporcji Kalkulator proporcji

Oto, co zawdzięczam 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 */
}

Pamiętaj, że reaguje on na iPhone'a 5, a nie na konkretną wersję iOS zainstalowaną na tym urządzeniu.

Aby scalić z istniejącą wersją, powinieneś móc je oddzielić 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 */
}

NB: Nie testowałem powyższego kodu, ale testowałem @mediawcześniej zapytania rozdzielane przecinkami i działają dobrze.

Zwróć uwagę, że powyższe może uderzyć w inne urządzenia, które mają podobne współczynniki, takie jak Galaxy Nexus. Oto dodatkowa metoda, która będzie kierowana tylko na urządzenia, które mają jeden wymiar 640px (560px z powodu pewnych dziwnych anomalii wyświetlanych pikseli) i jeden z zakresu od 960px (iPhone <5) do 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 */
}

Wszystkie te odpowiedzi wymienione powyżej, które używają max-device-widthlub max-device-heightdo zapytań o media, są obarczone bardzo silnym błędem: są skierowane również do wielu innych popularnych urządzeń mobilnych (prawdopodobnie niechcianych i nigdy nie testowanych lub które trafią na rynek w przyszłości).

Te zapytania będą działać na każdym urządzeniu z mniejszym ekranem i prawdopodobnie Twój projekt zostanie uszkodzony.

W połączeniu z podobnymi zapytaniami o media specyficznymi dla urządzenia (dla HTC, Samsung, IPod, Nexus ...) ta praktyka uruchomi bombę zegarową. W przypadku debigowania ten pomysł może sprawić, że CSS stanie się niekontrolowanym spagetti. Nigdy nie możesz przetestować wszystkich możliwych urządzeń.

Należy pamiętać, że jedyne zapytanie o media zawsze skierowane na IPhone5 i nic więcej to:

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

Zwróć uwagę, że sprawdzana jest tutaj dokładna szerokość i wysokość, a nie maksymalna szerokość.

Jakie jest rozwiązanie? Jeśli chcesz napisać stronę internetową, która będzie dobrze wyglądać na wszystkich możliwych urządzeniach, najlepszą praktyką jest użycie degradacji

/ * wzór degradacji sprawdzamy szerokość ekranu tylko na pewno, zmieni się z pionowego na poziomy * /

/*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 ponad 30% odwiedzających Twoją witrynę pochodzi z urządzeń mobilnych, odwróć ten schemat do góry nogami, zapewniając podejście przede wszystkim mobilne. Użyj min-device-widthw takim przypadku. Przyspieszy to renderowanie stron internetowych w przeglądarkach 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 układzie pionowym i poziomym

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

/* styles*/
}

iPhone 5 w orientacji poziomej

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

}

iPhone 5 w pionie

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

}

Żadna z odpowiedzi nie działa w moim przypadku na aplikację phonegapp.

Jak poniższe linki , 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 zawiera:

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

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

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

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

(Zastrzeżenie: to moja witryna)

afaik żaden iPhone nie używa współczynnika pikseli 1,5

iPhone 3G / 3GS: (-webkit-urządzenie-stosunek pikseli: 1) iPhone 4G / 4GS / 5G: (-webkit-urządzenie-stosunek pikseli: 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 */
}