Ventiquattro

Web designer goes to hollywood

CSS media query breakpoints: un po’ di numeri e qualche consiglio

Scritto 1 mese fa e archiviato in Journal

Ormai è abbastanza scontato che nel disegnare un tema grafico per un sito si consideri l’approccio “mobile first”. Di base si tratta di compilare il foglio di stile partendo dalle dimensioni minime, tipicamente gli smartphone, per poi salire utilizzando le “media queries”. È il metodo che utilizzo da molti anni e sono sicuro sia il migliore nel 99% dei casi. Una volta individuati quali saranno i punti di rottura (breakpoints) lavoreremo alla personalizzazione delle singole queries arricchendole di regole specifiche per le dimensioni desiderate. Fin qui è tutto abbastanza chiaro (ovviamente dovrete avere una conoscenza di base del funzionamento di @media. E dei fogli di stile). Il problema principale è, quali sono questi punti di rottura? Il panorama dei dispositivi mobili è ormai enorme, solo per iOS ci sono quasi venti diverse risoluzioni da considerare, poi ci sono le due diverse visualizzazioni, orizzontale e verticale… poi ci sono i dispositivi Android che hanno risoluzioni ancora più articolate. Bene, di seguito voglio provare a elencare un po’ di queste misure cercando di capire come riassumerle senza dover impazzire e senza dover rincorrere ogni singola specifica.

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

TipologiaLarghezzaModello
Mobile, portrait320pxiPhone SE
375pxiPhone: 6, 7, 8, X
414pxiPhone 8 Plus
Mobile, landscape568pxiPhone SE
667pxiPhone: 6, 7, 8
736pxiPhone 8 Plus
812pxiPhone X
Tablet, portrait768px iPad: Air, Mini, Pro 9″
834pxiPad Pro 10″
1024pxiPad Pro 12″
Tablet, landscape1024pxiPad: Air, Mini, Pro 9″
1112pxiPad Pro 10″
1366pxiPad Pro 12″
Laptop1366px HD laptops (768p)
1440pxMacBook Pro 13″ (2x)
1680pxMacBook Pro 13″ (1,5x)
Desktop1920pxdisplay 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:

SMLXL
Bootsrap 4min: 576pxmin: 768pxmin: 992pxmin: 1200px
Initializrmin: 480pxmin: 768pxmin: 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!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Mio cugino, il page builder di WordPress Mio cugino, il page builder di WordPress
<span>Freelance confessa:</span> <span>Faccio sport,</span> ma solo perché mi piace Freelance confessa: Faccio sport, ma solo perché mi piace
Tenere duro. Resistere. Riaprire il blog Tenere duro. Resistere. Riaprire il blog