width versus device-width
W CSS media różnica między width a device-width może być nieco zamglona, więc wyjaśnijmy to trochę. device-width odnosi się do szerokości samego urządzenia, innymi słowy, rozdzielczości ekranu urządzenia. Załóżmy, że rozdzielczość Twojego ekranu to 1440 x 900. Oznacza to, że ekran ma 1440 pikseli, więc jego szerokość device-width wynosi 1440px. Większość telefonów komórkowych ma device-width 480px lub mniej, w tym popularny iPhone 4 (z device-width: 320px), mimo że technicznie ma rozdzielczość 640 x 960. Jest to spowodowane wyświetlaczem retina w iPhone 4, który upycha dwa piksele urządzenia na każdy piksel CSS na ekranie. Dotyczy to również Ipada 3; jego zgłoszony device-width ma 768px tak jak jego poprzednicy, mimo że jego rzeczywista rozdzielczość ekranu to 1536px x 2048px. Ogólnie rzecz biorąc width jest bardziej uniwersalny jeśli chodzi o tworzenie responsywnych stron internetowych, chociaż device-width jest przydatny, gdy chcesz konkretnie skierować się do urządzeń mobilnych (a nie komputerów stacjonarnych z małym oknem przeglądarki na przykład), ponieważ rzadko kiedy komputery stacjonarne mają rozdzielczość ekranu poniżej pewnej liczby, takiej jak 320px x 480px.
Poniżej pokazano rozdzielczość ekranu i wymiary CSS media device dla niektórych popularnych urządzeń:
| Urządzenie | Rozdzielczość (px) | device-.width/ device-height (px) |
|---|---|---|
| iPhone | 320 x 480 | 320 x 480, zarówno w trybie portretowym, jak i krajobrazowym |
| iPhone 4 | 640 x 960 | 320 x 480, zarówno w trybie portretowym, jak i krajobrazowym. device-pixel-ratio jest 2 |
| iPhone 5, 5s | 640 x 1136 | 320 x 568, zarówno w trybie pionowym, jak i poziomym. device-pixel-ratio jest 2 |
| iPhone 6 | 750 x 1334 | 375 x 667, zarówno w trybie portretowym, jak i krajobrazowym. device-pixel-ratio to 2 |
| iPhone 6 plus | 1242 x 2208 | 414 x 736, zarówno w trybie portretowym, jak i krajobrazowym. device-pixel-ratio to 3 |
| iPad 1 i 2 | 768 x 1024 | 768 x 1024, zarówno w trybie portretowym, jak i krajobrazowym |
| iPad 3 | 1536 x 2048 | 768 x 1024, zarówno w trybie portretowym jak i krajobrazowym
Gęstość pikseli CSS wynosi 2 |
| Samsung Galaxy S I i II | 480 x 800 | 320 x 533, w trybie portretowym
Gęstość pikseli CSS wynosi 1.5 |
| Samsung Galaxy S III | 720 x 1280 | 360? x 640?, w trybie portretowym |
| HTC Evo 3D | 540 x 960 | 360 x 640, tryb portretowy
Gęstość pikseli CSS wynosi 1.5 |
| Amazon Kindle Fire | 1024 x 600 | 1024 x 600, tryb krajobrazowy |
Aby jeszcze bardziej skomplikować sprawy, w urządzeniach iPhone i iPad, device-width zawsze odpowiada szerokości urządzenia w trybie portretowym, niezależnie od tego, czy urządzenie jest w tym trybie, czy krajobraz zamiast tego. W przypadku innych urządzeń, szerokość urządzenia zmienia się w zależności od jego orientacji.
* Aby uzyskać bardziej kompletną listę urządzeń i ich rozdzielczości ekranu, odwiedź tę stronę.
Zobaczmy teraz jeszcze kilka zapytań o media CSS, które uchwycą różne urządzenia i wymiary ekranu:
/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}
/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */
}
/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
/* some CSS here */
}
/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
/* #### iPhone 5 Portrait or Landscape #### */
@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
/* #### iPhone 6 i 6 plus Portrait or Landscape #### */
@media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3){
/* some CSS here */
}
/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}
/* #### Desktopy #### */
@media screen and (min-width: 1024px){
/* some CSS here */
}
Więc mamy teraz dość dobry pomysł na używanie zapytań o media CSS. Jest jednak jeszcze jeden ważny element układanki, którego potrzebujemy, aby wszystko działało zgodnie z oczekiwaniami, a jest nim znacznik viewport meta.
- Wprowadzenie do CSS media queries
- Szerokość a szerokość urządzenia
- Meta tag viewport – klucz do przygotowania strony pod kątem optymalizacji dla urządzeń mobilnych
- Pasowanie zapytań o media CSS w JavaScript przy użyciu window.matchMedia()
Meta tag viewport – klucz do przygotowania strony pod kątem optymalizacji dla urządzeń mobilnych 
Przygotowanie strony pod kątem optymalizacji dla urządzeń mobilnych.