Quella sopra è una sintesi delle varie visualizzazioni di questo post, vi basterà ridimensionare la finestra del browser per verificare. In questo caso specifico ho utilizzato 6 diverse dimensioni minime. Questa scelta ha solo scopo dimostrativo, normalmente mi limito nell’utilizzo tarando il tutto su tre o quattro risoluzioni generiche che credo coprano tutti gli scenari. Ma di questo preciserò meglio alla fine di questo post. Vediamo quindi quali sono gli scenari generici per poi passare ad un elenco, il più possibile ricco e fedele, delle specifiche “larghezze” dei singoli device.

Un po’ di statistiche

La prima cosa da valutare è quale sia la risoluzione maggiormente diffusa, grazie a StatCounter abbiamo tutte le informazioni dettagliate sull’uso per paese e per dispositivo. Di seguito una panoramica generica a livello planetario che testimonia l’enorme diffusione dei dispositivi mobili ma anche una discreta tenuta tra i device “classici” :

• 11,28%360 x 640
• 8,66%1366 x 768
• 7,95%1980 x 1080
• 4,36%375 x 667
• 4,01%414 x 896
• 3,19%360 x 780

Per quanto riguarda l’Italia i dati sono leggermente in controtendenza:

• 13,81%1366 x 768
• 10,31%1920 x 1080
• 9,39%360 x 640
• 4,50%1536 x 864
• 4,20%357 x 667
• 3,98%1440 x 90

Tutti questi dati ci dicono abbastanza sulla domanda iniziale, ovvero: quali e quanti breakpoints dobbiamo utilizzare? A me però interessa un’analisi un po’ più scientifica, con tutti i miei limiti vorrei avere una panoramica quanto più precisa possibile. Vediamo quindi un po’ di numeri, non sono rappresentati tutti i modelli, come dicevo in particolare per Android la varietà è enorme ma credo sia da considerare valido lo scenario di casa Apple, più ristretto e facilmente comparabile a tutto il resto.

Risoluzioni dispositivi Apple

Nella tabella successiva ho inserito i dispositivi Apple e relative risoluzioni, per tablet e smartphone con le due opzioni, portrait e landscape (verticale e orizzontale). Qui trovate il post originale con questi a e altri dettagli

Tipologia	Larghezza	Modello
Mobile, portrait	320px	iPhone SE
	375px	iPhone: 6, 7, 8, X
	414px	iPhone 8 Plus
Mobile, landscape	568px	iPhone SE
	667px	iPhone: 6, 7, 8
	736px	iPhone 8 Plus
	812px	iPhone X
Tablet, portrait	768px	iPad: Air, Mini, Pro 9″
	834px	iPad Pro 10″
	1024px	iPad Pro 12″
Tablet, landscape	1024px	iPad: Air, Mini, Pro 9″
	1112px	iPad Pro 10″
	1366px	iPad Pro 12″
Laptop	1366px	HD laptops (768p)
	1440px	MacBook Pro 13″ (2x)
	1680px	MacBook Pro 13″ (1,5x)
Desktop	1920px	display 1080p

Come dicevo per i dispositivi Android il panorama è molto variegato ma tutto sommato è facile da “coprire” con le dimensioni di Apple. Se però siete dei temerari o volete comunque avere tutte i dati qui li trovate.

Breakpoints comuni

Un altro strumento di analisi che possiamo utilizzare è quello di valutare i breakpoints utilizzati dai principali framework CSS, giusto per avere un altro dato utile. Di seguito ne riporto due, Bootstrap nella sua 4 release e uno un po’ datato ma che considero ancora molto valido e che continuo ad utilizzare con buoni risultati:

	S	M	L	XL
Bootsrap 4	min: 576px	min: 768px	min: 992px	min: 1200px
Initializr	min: 480px	min: 768px	min: 1140px

Come vedete si tratta di fare una sintesi cercando di provvedere al maggior numero di scenari possibili; Initializr omette la versione per display particolarmente larghi, questo è ovviamente causato dalla data del suo rilascio, oltre 10 anni fa, ma è un limite molto piccolo e soprattutto facilmente risolvibile aggiungendo quel dato. A questo proposito vi ricordo che ancora oggi la maggior parte di desktop ha una risoluzione di 1366px (vedi dati a inizio post) per cui come dimensione massima io utilizzo quella, togliendo 40px per sicurezza, molti browser datati includono la scrollbar nel computo per cui preferisco tenerlo a mente.

Altra nota. Anche se molti monitor hanno risoluzioni maggiori (ad esempio, il mio iMac 27” ha una risoluzione di 2560px) non credo sia il caso di considerare certe larghezze. Per mia esperienza e per quello che vedo in giro la finestra del browser difficilmente arriverà oltre i 2/3 dello schermo… con i 1366px si va poco oltre la metà e secondo me è più che sufficiente.

Passiamo alla pratica: suggerimenti generali e il mio metodo

Detto tutto questo torniamo alla domanda, come regolare le nostre media queries? Credo che la soluzione usata da Initializr sia ancora la migliore, con piccoli accorgimenti che vi elenco qui sotto. Ecco il codice CSS:

@media only screen and (min-width: 480px) {

}

@media only screen and (min-width: 768px) {

}

@media only screen and (min-width: 1140px) {

}

@media only screen and (min-width: 1326px) {

}

Rispetto al minimo di 576 px di Bootstrap preferisco i 480px che coprono anche dispositivi più vecchi, tipo iPhone SE.

Un’altra aggiunta interessante sarebbe quella di prevedere una via di mezzo tra i 768 e i 480, con 640px potremmo coprire molti tablet in modalità portrait e quasi tutti gli smartphone in landscape. Sono scelte che ognuno deve fare, in base al singolo progetto ed alla voglia che si ha di lavorare un po’ di più.

Per finire vi lascio le media queries che ho utilizzato per questo post, che come dicevo hanno solo finalità dimostrative e che sono un po’ ambigue rispetto a quanto scritto sopra…. avevo come priorità l’inserimento delle figure come sfondo per cui ho fatto ruotare tutto intorno a quello. Perché bisogna anche essere elastici.

@media only screen and (min-width: 480px) {

}

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

}

@media only screen and (min-width: 768px) {

}

@media only screen and (min-width: 1024px) {

}

@media only screen and (min-width: 1366px) {

}

@media only screen and (min-width: 1680px) {

}

Vi invito a segnalare qualsiasi errore troviate o, molto benvenuti, qualsiasi suggerimento!