breedte versus apparaatbreedte
In CSS media kan het verschil tussen width en device-width een beetje verwarrend zijn, dus laten we daar eens wat dieper op ingaan. device-width verwijst naar de breedte van het apparaat zelf, met andere woorden, de schermresolutie van het apparaat. Laten we zeggen dat de resolutie van uw scherm 1440 x 900 is. Dit betekent dat het scherm 1440 pixels breed is, dus een device-width van 1440px heeft. De meeste mobiele telefoons hebben een device-width van 480px of lager, inclusief de populaire iPhone 4 (met device-width: 320px), ondanks dat deze technisch gezien een 640 x 960 resolutie heeft. Dit is te wijten aan het retina scherm van de iPhone 4, dat twee apparaatpixels in elke CSS pixel op het scherm propt. Dit geldt ook voor de Ipad 3; zijn gerapporteerde device-width is 768px net als zijn voorgangers, ook al is de werkelijke schermresolutie 1536px x 2048px. Over het algemeen is width veelzijdiger als het gaat om het maken van responsive webpagina’s, hoewel device-width handig is als je je specifiek wilt richten op mobiele apparaten (en niet op desktops met een klein browservenster bijvoorbeeld), omdat desktops zelden een schermresolutie hebben onder een bepaald getal zoals 320px x 480px.
Hieronder ziet u de schermresolutie en CSS media device afmetingen van enkele populaire apparaten:
| Device | resolutie (px) | device-breedte/apparaat-hoogte (px) |
|---|---|---|
| iPhone | 320 x 480 | 320 x 480, in zowel staande als liggende modus |
| iPhone 4 | 640 x 960 | 320 x 480, in zowel staande als liggende modus. device-pixel-ratio is 2 |
iPhone 5, 5s | 640 x 1136 | 320 x 568, in zowel staande als liggende modus. device-pixel-ratio is 2 |
iPhone 6 | 750 x 1334 | 375 x 667, in zowel staande als liggende modus. device-pixel-ratio is 2 |
iPhone 6 plus | 1242 x 2208 | 414 x 736, in zowel portret- als landschapsmodus. device-pixel-ratio is 3 |
iPad 1 en 2 | 768 x 1024 | 768 x 1024, in zowel staande als liggende modus |
| iPad 3 | 1536 x 2048 | 768 x 1024, in zowel staande als liggende modus
CSS pixeldichtheid is 2 |
| Samsung Galaxy S I en II | 480 x 800 | 320 x 533, in portret modus
CSS pixel dichtheid is 1.5 |
| Samsung Galaxy S III | 720 x 1280 | 360? x 640?, in portretmodus |
| HTC Evo 3D | 540 x 960 | 360 x 640, in portretmodus
CSS pixeldichtheid is 1.5 |
| Amazon Kindle Fire | 1024 x 600 | 1024 x 600, landschapsmodus |
Om de zaken nog ingewikkelder te maken, bij iPhone- en iPad-apparaten komt de apparaatbreedte altijd overeen met de breedte van het apparaat in portretmodus, ongeacht of het apparaat zich in die modus bevindt of in landscape. Bij andere apparaten verandert de apparaatbreedte afhankelijk van de oriëntatie.
* Voor een completere lijst van apparaten en hun schermresoluties, ga naar deze pagina.
Laten we nu eens wat meer CSS media queries bekijken die verschillende apparaten en schermafmetingen vastleggen:
/* #### Mobiele telefoons Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}
/* #### Mobiele telefoons Landscape #### */
@media screen and (max-device-width: 640px) en (oriëntatie: landschap){
/* enige CSS hier */
}
/* #### Mobiele telefoons Portret of Landschap #### */
@media screen en (max-device-width: 640px){
/*een beetje CSS hier */
}
/* #### iPhone 4+ Portret of Landschap #### */
@media screen en (min-device-width: 320px) en (-webkit-min-device-pixel-ratio: 2){
/* hier wat CSS */
}
/* #### iPhone 5 Portret of Landschap #### */
@media (device-height: 568px) en (device-width: 320px) en (-webkit-min-device-pixel-ratio: 2){
/* wat CSS hier */
}
/* #### iPhone 6 en 6 plus Portret of Landschap #### */
@media (min-device-height: 667px) en (min-device-width: 375px) en (-webkit-min-device-pixel-ratio: 3){
/*een beetje CSS hier */
}
/* #### Tablets Portret of Landschap #### */
@media scherm en (min-device-width: 768px) en (max-device-width: 1024px){
/* enige CSS hier */
}
/* #### Desktops #### */
@media screen and (min-width: 1024px){
/* enige CSS hier */
}
Dus we hebben nu een redelijk goed idee over het gebruik van CSS media queries. Er is echter nog een belangrijk stukje van de puzzel dat we nodig hebben om alles te laten werken zoals verwacht, en dat is de viewport meta tag.
- Inleiding tot CSS media query’s
- breedte versus apparaatbreedte
- De viewport meta tag- de sleutel tot het voorbereiden van een pagina voor mobiele apparaten optimalisatie
- CSS media query matching in JavaScript met behulp van window.matchMedia()
De viewport meta tag- de sleutel tot het voorbereiden van een pagina voor mobiele apparaten optimalisatie 