Quali dimensioni / risoluzioni del dispositivo è l'attributo di Chrome's `SRCSET" corrisponde a?

Question

C'è una mappa che definisce quali dimensioni del dispositivo / risoluzione delle dimensioni del dispositivo Chrome IMG srcset Le dimensioni corrispondono a?

Ad esempio, nel caso di

<img src="pic1x.png" srcset="pic1x.png 1x, pic2x.png 2x, pic4x.png 4x">

.

Quali schermate di dimensioni / risoluzione riceverebbero ciascuna di queste dimensioni dell'immagine?E / o ci sono altre dimensioni?

Answer 1

Il moltiplicatore srcset rappresenta punti per unità pixel. Mappa in un rapporto tra pixel a dimensioni fisiche, piuttosto che una particolare risoluzione. Ecco una semplice mappatura:

Multiplier(dppx)  Dots Per Inch(dpi)
1                 96dpi
1.3               124.8dpi
1.5               144dpi
2                 192dpi

.

1 dppx = 96 dpi
1 dpi = 2.54 dpcm
1 dpcm ≈ 0.39dpi

.

.
• DPI: punti per pollice; 1dpi ≈ 2.54dpcm
• DPCM: punti per centimetro; 1dpcm ≈ 0.39dpi
• DPPX: punti per unità PX; 1DPPX ≈ 96DPI

Riferimenti

.
• retina.js
• unità di risoluzione
• Quali query dei supporti possono il mio dispositivo vedere
• CSS Media Queres Report di implementazione
• Il vero conflitto dietro e @srcset < / a>