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.