larghezza contro larghezza del dispositivo
Nei media CSS la differenza tra width e device-width può essere un po’ confusa, quindi spieghiamo meglio. device-width si riferisce alla larghezza del dispositivo stesso, in altre parole, la risoluzione dello schermo del dispositivo. Diciamo che la risoluzione del vostro schermo è 1440 x 900. Questo significa che lo schermo è di 1440 pixel, quindi ha un device-width di 1440px. La maggior parte dei telefoni cellulari ha una larghezza del dispositivo di 480px o inferiore, compreso il popolare iPhone 4 (con larghezza del dispositivo: 320px), nonostante abbia tecnicamente una risoluzione di 640 x 960. Questo è dovuto al display retina dell’iPhone 4, che stipula due pixel del dispositivo in ogni pixel CSS sullo schermo. Questo è vero anche per l’Ipad 3; il suo device-width riportato è 768px proprio come i suoi predecessori, anche se la sua risoluzione effettiva dello schermo è 1536px x 2048px. In generale width è più versatile quando si tratta di creare pagine web responsive, anche se device-width è utile quando si desidera rivolgersi specificamente ai dispositivi mobili (e non ai desktop con una piccola finestra del browser per esempio), poiché raramente i desktop hanno risoluzioni dello schermo al di sotto di un certo numero come 320px x 480px.
Il seguente mostra la risoluzione dello schermo e le dimensioni del dispositivo media CSS di alcuni dei dispositivi popolari là fuori:
| Dispositivo | risoluzione (px) | dispositivo-width/ device-height (px) |
|---|---|---|
| iPhone | 320 x 480 | 320 x 480, sia in modalità verticale che orizzontale |
| iPhone 4 | 640 x 960 | 320 x 480, sia in modalità verticale che orizzontale. device-pixel-ratio è 2 |
| iPhone 5, 5s | 640 x 1136 | 320 x 568, sia in modalità verticale che orizzontale. device-pixel-ratio è 2 |
| iPhone 6 | 750 x 1334 | 375 x 667, sia in modalità verticale che orizzontale. device-pixel-ratio è 2 |
| iPhone 6 plus | 1242 x 2208 | 414 x 736, sia in modalità verticale che orizzontale. device-pixel-ratio è 3 |
| iPad 1 e 2 | 768 x 1024 | 768 x 1024, sia in modalità verticale che orizzontale |
| iPad 3 | 1536 x 2048 | 768 x 1024, sia in modalità verticale che orizzontale
La densità di pixel CSS è 2 |
| Samsung Galaxy S I e II | 480 x 800 | 320 x 533, in modalità ritratto
La densità di pixel CSS è 1.5 |
| Samsung Galaxy S III | 720 x 1280 | 360? x 640, in modalità ritratto |
| HTC Evo 3D | 540 x 960 | 360 x 640, modalità ritratto
La densità di pixel CSS è 1.5 |
| Amazon Kindle Fire | 1024 x 600 | 1024 x 600, modalità orizzontale |
Per complicare ulteriormente le cose, nei dispositivi iPhone e iPad, la larghezza del dispositivo corrisponde sempre alla larghezza del dispositivo in modalità verticale, indipendentemente dal fatto che il dispositivo sia in quella modalità o in quella orizzontale. Con gli altri dispositivi, la larghezza del dispositivo cambia a seconda del suo orientamento.
* Per una lista più completa dei dispositivi e delle loro risoluzioni dello schermo, visitate questa pagina.
Vediamo ora alcune altre media query CSS che catturano diversi dispositivi e dimensioni dello schermo:
/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
/* alcuni CSS qui */
}
/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) e (orientamento: landscape){
/* alcuni CSS qui */
}
/* #### Cellulari Ritratto o Paesaggio #### */
@media screen and (max-device-width: 640px){
/* qualche CSS qui */
}
/* #### iPhone 4+ Ritratto o Paesaggio #### */
@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* alcuni CSS qui */
}
/* #### iPhone 5 Portrait o Landscape #### */
@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* alcuni CSS qui */
}
/* #### iPhone 6 e 6 plus Portrait o Landscape #### */
@media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3){
/* alcuni CSS qui */
}
/* #### Tablets Portrait o Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* alcuni CSS qui */
}
/* #### Desktop #### */
@media screen and (min-width: 1024px){
/* alcuni CSS qui */
}
Quindi ora abbiamo un’idea abbastanza buona sull’uso delle media queries CSS. Tuttavia, c’è un altro pezzo importante del puzzle di cui abbiamo bisogno perché tutto funzioni come previsto, ed è il tag viewport meta.
- Introduzione alle media query CSS
- larghezza rispetto alla larghezza del dispositivo
- Il meta tag viewport – la chiave per preparare una pagina per l’ottimizzazione dei dispositivi mobili
- La corrispondenza delle media query CSS in JavaScript usando window.matchMedia()
Il meta tag viewport – la chiave per preparare una pagina per l’ottimizzazione dei dispositivi mobili 