Utilizza descrittori di densità

Katie Hempenius
Katie Hempenius
X

Esplora questa demo

  • Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi Schermo intero schermo intero.
  • Ricarica la pagina utilizzando dispositivi diversi per vedere che il browser carica in modo diverso in formato Docker.

A questo scopo, puoi usare l'emulatore del dispositivo. Se stai cercando un display specifico di densità più elevate, ecco alcuni dispositivi da provare:

Densità 1x Playbook BlackBerry, molti monitor esterni
Densità 2x iPad o iPhone 5/6
Densità 3x Galaxy S5 o iPhone X
  • Effettua il pagamento su index.html per trovare il codice che consente il funzionamento.

Come funziona?

Il concetto di descrittori di densità potrebbe non essere noto alla maggior parte delle persone. Per migliorare a capirle, è utile avere qualche informazione generale sul funzionamento del browser con i pixel.

Che cosa sono i pixel

Partiamo dall'inizio definendo cos'è un pixel. Suona semplice, ma "pixel" può avere in realtà molti significati:

Pixel del dispositivo (noto anche come "pixel fisici")
Il punto di colore più piccolo che può essere visualizzato su un dispositivo.
Pixel logico
Informazioni che specificano il colore in una determinata posizione su una griglia. Questo tipo di pixel non ha una dimensione fisica intrinseca.
Pixel CSS
La specifica CSS definisce un pixel come un'unità di misura fisica. 1 pixel = 1/96 di pollice.

Densità pixel

Densità dei pixel (indicata anche come "densità dello schermo" o "densità del display") misura la densità dei pixel del dispositivo in una data area fisica. Questo è di solito misurate utilizzando i pixel per pollice (ppi).

Per molti anni, 96 ppi è stata una densità di visualizzazione molto comune (quindi CSS, che definisce pixel di 1/96 di pollice). A partire dagli anni '80, era la risoluzione predefinita di Windows. Inoltre, era la risoluzione di CRT e monitor.

La situazione ha cominciato a cambiare man mano che i monitor LED sono diventati comuni negli anni 2000. In particolare, Apple ha avuto un grande successo nel 2010 con l'introduzione dei display Retina. Questi display aveva una risoluzione minima di 192 ppi, che era il doppio della risoluzione "regolare" (192 ppi/96 ppi = 2).

window.devicePixelRatio

Con l'introduzione della più recente tecnologia di visualizzazione, i "pixel del dispositivo" ha iniziato a variare di dimensioni e forma fisiche e non erano più delle stesse dimensioni di "Pixel CSS". La necessità di definire relazione tra le dimensioni dei "pixel del dispositivo" e "Pixel CSS" è la causa l'introduzione di devicePixelRatio (talvolta chiamata "Pixel CSS ").

devicePixelRatio definisce la relazione tra i pixel dispositivo e i pixel CSS per un determinato dispositivo. Un dispositivo con 192 PPI ha un valore devicePixelRatio di 2 (192 ppi/96 ppi = 2) perché "2 dei suoi pixel di visualizzazione sono pari a 1 pixel CSS".

Al giorno d'oggi la maggior parte dei dispositivi ha una OPR tra 1,0 e 4,0.

  • Per determinare la densità dei pixel di un dispositivo, digita window.devicePixelRatio nella console.

  • Visualizza questa tabella per vedere le proporzioni pixel di tra i dispositivi più comuni. La maggior parte è compresa tra 1,0 e 4,0.

Come si applicano effettivamente queste informazioni?

Dimensioni delle immagini in base alle proporzioni pixel del dispositivo

Per fare in modo che le immagini appaiano al meglio sugli schermi ad alta risoluzione, necessarie per fornire versioni delle immagini diverse per devicePixelRatios diversi.

Proporzioni pixel dispositivo Indica che: Su questo dispositivo, un <img> con larghezza CSS di 250 pixel, hanno un aspetto migliore quando l'immagine sorgente è...
1 1 pixel del dispositivo = 1 pixel CSS 250 pixel di larghezza
2 2 pixel del dispositivo = 1 pixel CSS 500 pixel di larghezza
3 3 pixel del dispositivo = 1 pixel CSS 750 pixel di larghezza

Aspetti importanti:

  • Le dimensioni in pixel indicate negli editor delle immagini, nelle directory dei file in altri punti sono una misurazione di pixel logici.
  • Per schermi con risoluzione più alta e display più grandi, sono necessarie immagini con dimensioni più grandi. Il semplice ingrandimento di immagini più piccole rende inutile lo scopo per la pubblicazione di più versioni di immagini. Il browser lo avrebbe fatto comunque se non è stata fornita un'immagine ad alta risoluzione.
di Gemini Advanced.

Utilizza i descrittori di densità per pubblicare più immagini

Descrittori di densità, insieme a "srcset " , può essere utilizzato per immagini diverse per devicePixelRatio diversi.

  • Dai un'occhiata al file index.html e prendi nota dell'elemento <img>.
<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

Questo esempio spiega con le seguenti parole:

  • 1x, 2x e 3x sono tutti descrittori di densità che indicano al browser la densità dei pixel a cui è destinata un'immagine. Questa operazione salva di dover scaricare un'immagine per determinare queste informazioni.
  • Il browser può scegliere fra tre immagini: flower-1x.jpg (denominata per browser con una densità di pixel pari a 1.0), flower-2x.jpg (destinato a browser con una densità di pixel di 2.0) e flower-3x.jpg (destinato a browser con una densità di pixel di 3.0).
  • flower.jpg è l'immagine di riserva per i browser che non supportano srcset.

Come usare questa funzionalità:

  • Usa un devicePixelRatio e l'unità x per scrivere i descrittori di densità. Per Ad esempio, il descrittore di densità per molti schermi Retina (window.devicePixelRatio = 2) verrebbe scritto come 2x.
  • Se non viene fornito un descrittore di densità, si presume che sia 1x.
  • L'inclusione dei descrittori di densità nei nomi file è una convenzione comune (e ti aiutano a tenere traccia dei file), ma non è necessario. Le immagini possono avere qualsiasi nome file.
  • Non è necessario includere un attributo sizes. L'attributo sizes è solo utilizzati con i descrittori di larghezza.