I display, che si tratti di dispositivo mobile o meno, hanno visto negli ultimi anni un aumento esponenziale della densità di pixel. A pari dimensione fisica il numero di pixel infatti è quadruplicato o anche più.
Questo è stato possibile grazie a display/monitor con pixel sempre più piccoli e di conseguenza va da sè che in un medesimo spazio fisico (i soliti 5/6’ del tuo smartphone ad esempio) ce ne stiano molti di più di prima.
E’ stato sicuramente un bene per la resa visiva: testi più nitidi, immagini più vivide, tutto più HD, tutto più retina.
Chi si occupa di web design però sa bene (o almeno lo speriamo) che di queste risoluzioni sempre maggiori non ce ne facciamo un granchè, salvo rari casi.
Questo perchè 1 pixel dei supponiamo 1000 che compongono la larghezza di un dispositivo in realtà vale, a seconda del produttore, 1/2, 1/3 o anche 1/4 del pixel “visto” dal browser.
E’ per questo motivo che nonostante gli smartphone odierni abbiano display ad altissime risoluzioni in realtà le pagine a loro dedicate vengano considerate larghe non oltre i 450 px circa.
Per fare un esempio pratico prendiamo il caso di iPhone XS.
La sua risoluzione (intesa come prodotto tra il numero di pixel orizzontali e il numero di pixel verticali del display) è di 1125 x 2436 px eppure al browser è stato ordinato da Apple di renderizzarne solamente 375 x 812: 1/3 in larghezza e 1/3 in altezza, ovvero 1/9 dei pixel totali disponibili.
Questo vuol dire che 1 pixel, nel browser, è in realtà rappresentato da un gruppo di 9 pixel reali del telefono (3x3). Il pixel, nel browser, è come diventato più grosso, 9 volte più grosso.
Apple non ci dicendo bugie dichiarando valori così elevati, o almeno non lo sta facendo in questo caso, in effetti il display è davvero dotato di 1.125 x 2.436 = 2.740.500 px.
Piccola parentesi, quasi 3 milioni di punti, che possono assumere ognuno un colore diverso indipendentemente, il tutto nella dimensione di una mano (e non tipo sanpietrini di una piazza), è davvero notevole. Ora sti pixel li fanno davvero microscopici, parliamo di pochi centesimi di millimetro.
Pensieri filosofici a parte, perchè quindi quei 1125 x 2436 px si riducono così tanto?
La risposta è molto banale: perchè altrimenti, su un dispositivo largo 4 dita che si utilizza mediamente da 30 cm di distanza, nessuno riuscirebbe a leggere niente!
Mi spiego: 1125 px di larghezza è poco meno dei 1366 px di qualsiasi portatile di fascia bassa. Ma un portatile ha un monitor da almeno 13 pollici, non da 5…
L’estrema nitidezza data da queste risoluzioni così elevate permette da un lato di avere dettagli altissimi nelle fotografie, ad esempio, ma dall’altro rimpicciolisce i testi.
Se creo una pagina html e scrivo qualcosa con carattere 16 px, che per chi non lo sapesse è una dimensione del tutto normale per un testo, significherebbe vedere (ma di sicuro non leggere) ben 152 righe circa totali se venisse utilizzata la risoluzione reale, interlinea a parte.
Provate anche solo ad indicarle, sul display, 152 righe diverse, è praticamente impossibile, figuriamoci leggerle!
Le 152 righe diventano invece circa 50 quando entra in gioco questa risoluzione diminuita con cui hanno a che fare gli addetti ai lavori (la cosiddetta dimensione di viewport), tutto a vantaggio della leggibilità.
Questa versione “Lo-Fi” del nostro costosissimo display quindi è necessaria, o finiremmo per vedere sul telefono il layout desktop rimpicciolito e non una versione ergonomica, modificata, dedicata ed usabile (peraltro con il dito al posto del mouse).
Qui sotto le due versioni della stessa pagina Give Back del nostro sito: il testo misura sempre 18 px di grandezza in entrambe ma la prima è la versione che tutti potete vedere sul vostro dispositivo mobile, che utilizza la risoluzione diminuita, appunto la risoluzione della viewport (qui 400 px), mentre nella seconda ho forzato il rendering in modo da utilizzare interamente la risoluzione reale del dispositivo (in questo caso 1330 px, ma assolutamente paragonabili all’effetto che avremmo sui 1125 px di cui sopra).
Riepilogando i numeri:
- testo sempre da 18 px
- pagina web sempre larga 1330 px
- In un caso viewport larga 400 px
- Nell’altro viewport forzata a 1330 px
 |  |
Come si può notare la seconda è di fatto una versione rimpicciolita del layout desktop, e aggiungo inutilizzabile, perchè i 1330 px di larghezza della pagina web, invece che essere spalmati su monitor largo, che so, 40 cm, sono compressi in uno largo 10.
La prima soluzione invece, che come avviene nella realtà gode di questa diminuzione della risoluzione, ci permette di fruire correttamente i contenuti ed interagire con il touch in modo soddisfacente.
Il W3C (l’organizzazione mondiale che consiglia gli standard del web) infatti spiega:
"The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch)."
Non è chiaramente inutile questa sovrabbondanza: l’anti-aliasing farà il suo già ottimo lavoro ancora di più in questi casi. Nel monitor in effetti i pixel ci sono, solamente non vengono “comandati” dal nostro software.
Il controller del display invece può e saprà condire adeguatamente i contorni in modo da migliorare i contrasti e di conseguenza rendere il testo più nitido, bello da leggere e meno affaticante.
Da qui il motivo per cui nelle media queries della progettazione responsive di parla di mobile sotto i 700 px circa, nonostante la larghezza reale in pixel degli smartphone sia di molto superiore.
