170

questo è menzionato in ogni articolo sul Web mobile, ma da nessuna parte posso trovare una spiegazione di cosa misura esattamente questo attributo.
Qualcuno può elaborare quali sono le domande come questo controllo?

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5) {

    //high resolution images go here

}

css

— Ilyo
fonte

161

Risposta breve

Il rapporto pixel del dispositivo è il rapporto tra pixel fisici e pixel logici. Ad esempio, l'iPhone 4 e l'iPhone 4S riportano un rapporto pixel del dispositivo pari a 2, poiché la risoluzione fisica lineare è doppia rispetto alla risoluzione lineare logica.

Risoluzione fisica: 960 x 640
Risoluzione logica: 480 x 320

La formula è:

$linres_p / linres_l$

Dove:

$linres_p$ è la risoluzione lineare fisica

e:

$linres_l$ è la risoluzione lineare logica

Altri dispositivi riportano rapporti pixel dei dispositivi diversi, inclusi quelli non interi. Ad esempio, il Nokia Lumia 1020 riporta 1.6667, il Samsumg Galaxy S4 riporta 3 e l'Apple iPhone 6 Plus riporta 2.46 (fonte: dpilove ) . Ma questo non cambia nulla in linea di principio, poiché non dovresti mai progettare per un dispositivo specifico.

Discussione

Il "pixel" CSS non è nemmeno definito come "un elemento dell'immagine su un certo schermo", ma piuttosto come una misurazione angolare non lineare dell'angolo di $0,0213 °$ visione, che è approssimativamente $1/96$ di un pollice alla distanza di un braccio. Fonte: CSS Absolute Lengths

Ciò ha molte implicazioni quando si tratta di web design, come la preparazione di risorse di immagini ad alta definizione e l'applicazione accurata di immagini diverse a diversi rapporti di pixel del dispositivo. Non vorrai forzare un dispositivo di fascia bassa a scaricare un'immagine ad altissima risoluzione, solo per ridimensionarla localmente. Inoltre, non si desidera che i dispositivi di fascia alta eseguano l'upscaling delle immagini a bassa risoluzione per un'esperienza utente sfocata.

Se sei bloccato con immagini bitmap, per adattarsi a molti rapporti pixel dei dispositivi diversi, dovresti usare le Media query CSS per fornire diversi set di risorse per diversi gruppi di dispositivi. Combina questo con buoni trucchi come background-size: covero imposta esplicitamente i background-sizevalori percentuali.

Esempio

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

In questo modo, ogni tipo di dispositivo carica solo la risorsa immagine corretta. Inoltre, tieni presente che l' pxunità nei CSS funziona sempre su pixel logici .

Un caso per la grafica vettoriale

Man mano che appaiono sempre più tipi di dispositivi, diventa più difficile fornire a tutti loro risorse bitmap adeguate. Nel CSS, le query multimediali sono attualmente l'unico modo e, in HTML5, l' elemento immagine consente di utilizzare origini diverse per query multimediali diverse, ma il supporto non è ancora al 100% poiché la maggior parte degli sviluppatori Web deve ancora supportare IE11 per un po 'di più ( fonte: caniuse ) .

Se hai bisogno di immagini nitide per icone, disegni al tratto, elementi di design che non siano foto , devi iniziare a pensare a SVG, che si adatta perfettamente a tutte le risoluzioni.

— Anders Tornblad
fonte

1

grazie, quindi se creo un file CSS per iPhone 4 e do alla pagina misure CSS di 480 x 320 e width=device-widthlo allungherò a schermo intero?

— ilyo,

1

Esattamente. E se stai usando immagini ad alta risoluzione per background-image, puoi combinarle con -webkit-background-size:50%, perché altrimenti la dimensione dell'immagine seguirà il conteggio logico dei pixel. w3.org/TR/2002/WD-css3-background-20020802/#background-size

— Anders Tornblad

2

Non puoi. Dovrai impaginare i tuoi elementi utilizzando pixel logici e utilizzare immagini ad alta risoluzione e il background-sizetrucco per utilizzare il display in modo ottimale.

— Anders Tornblad,

2

Non ho idea del caso Android. È possibile che diversi produttori abbiano idee diverse sui pixel logici e fisici ... Provalo tu stesso su un paio di centinaia di dispositivi diversi ... O semplicemente supponi che i valori riportati dal dispositivo siano corretti. Non progettare per dispositivi specifici, ma progettare per intervalli di valori utilizzando le query multimediali!

— Anders Tornblad,

2

@atornblad Penso che dovrebbe essere ".. tra pixel fisici e logici "

— Ilya Buziuk,

159

Rapporto pixel dispositivo == Rapporto pixel CSS

Nel mondo dello sviluppo web, il rapporto pixel del dispositivo (chiamato anche CSS Pixel Ratio) è ciò che determina come la risoluzione dello schermo di un dispositivo viene interpretata dal CSS.

Il CSS di un browser calcola la risoluzione logica (o interpretata) di un dispositivo mediante la formula:

$\text{logical resolution}=\frac{\text{physical resolution}}{\text{device pixel ratio}}$

Per esempio:

Apple iPhone 6s

Risoluzione effettiva: 750 x 1334
Rapporto pixel CSS: 2
Risoluzione logica:

$\frac{750}{2} \text{ x } \frac{1334}{2} = 375 \text{ x } 667$

Durante la visualizzazione di una pagina Web, il CSS penserà che il dispositivo abbia uno schermo con risoluzione 375x667 e Media Query risponderà come se lo schermo fosse 375x667 . Ma gli elementi renderizzati sullo schermo saranno due volte più nitidi di uno schermo reale 375x667 perché ci sono il doppio di pixel fisici nello schermo fisico.

Alcuni altri esempi:

Samsung Galaxy s4

Risoluzione effettiva: 1080 x 1920
Rapporto pixel CSS: 3
Risoluzione logica:

$\frac{1080}{3} \text{ x } \frac{1920}{3} = 360 \text{ x } 640$

iPhone 5s

Risoluzione effettiva: 640 x 1136
Rapporto pixel CSS: 2
Risoluzione logica:

$\frac{640}{2} \text{ x } \frac{1136}{2} = 320 \text{ x } 568$

Perché esiste il rapporto pixel dispositivo?

Il motivo per cui è stato creato il rapporto pixel CSS è perché quando gli schermi dei telefoni ottengono risoluzioni più elevate, se ogni dispositivo avesse ancora un rapporto pixel CSS di 1, le pagine Web sarebbero troppo piccole per essere visualizzate.

Un tipico monitor desktop a schermo intero ha una risoluzione di circa 24 "a 1920x1080. Immagina se quel monitor fosse ridotto a circa 5" ma avesse la stessa risoluzione. Visualizzare le cose sullo schermo sarebbe impossibile perché sarebbero così piccole. Ma i produttori stanno uscendo costantemente con schermi telefonici con risoluzione 1920x1080.

Pertanto, il rapporto in pixel del dispositivo è stato inventato dai produttori di telefoni in modo che potessero continuare a spingere la risoluzione, la nitidezza e la qualità degli schermi del telefono, senza rendere gli elementi sullo schermo troppo piccoli per essere visti o letti.

Ecco uno strumento che ti dice anche la densità di pixel del tuo dispositivo attuale:

http://bjango.com/articles/min-device-pixel-ratio/

— Jake Wilson
fonte

L'articolo di Wikipedia è stato cancellato. :-( Queste informazioni sono disponibili altrove?

— Simon East,

1

Quindi le immagini sono allungate per abbinare dpi alti o pixel fisici. Supponiamo che l'immagine sia 300px, anche la logica / css px sia 300, ma la px fisica sia 600 quindi l'impostazione della larghezza dell'immagine significherebbe allungare l'immagine .. Ho anche sentito che a volte le immagini mostrano dimensioni più ridotte con dpi alti, perché?

— Muhammad Umer,

2

@MuhammadUmer Nel tuo esempio, un'immagine di 300 px width: 100%sarà l'intera larghezza del display. Non sarà allungato. Lo schermo "pensa" che sia un display da 300px. Le immagini vengono visualizzate in base alla risoluzione logica / css. Ora, nel tuo esempio potresti anche servire un'immagine a 600px. Sarà la larghezza completa del display logico a 300 px, ma poiché il display è nativo a 600 px, l'immagine apparirà due volte più nitida dell'immagine originale a 300 px. Immagine più grande, ma sembra migliore poiché il display ha tutti quei pixel extra. Questa è l'idea alla base di "Retina Display".

— Jake Wilson,

@JakeWilson: questo è un nuovo argomento per me e non lo capisco del tutto. Nell'esempio CSS pixel ratio = 2. L'immagine è larga 300 pixel fisici, in css la impostiamo al 100%, quindi diventerà larga 300 pixel CSS. Poiché il rapporto px CSS è 2, diventerà largo 600 pixel fisici e la sua larghezza corrisponderà esattamente alla larghezza del display. Ma come mai non viene allungato se la sua larghezza originale è di 300 px fisici e ora è di 600 px fisici? La mia comprensione è che la sua qualità è inferiore perché è stata allungata fisicamente da 300 a 600 px. Puoi approfondire un po 'di più, per favore?

— Peter,

1

@Anuj non lo so e non importa come sia definito nell'hardware / software. Uno viene calcolato dall'altro in entrambi i modi in cui lo si taglia.

— Jake Wilson,

9

https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio

-moz-device-pixel-ratio
Fornisce il numero di pixel del dispositivo per pixel CSS.

questo è quasi autoesplicativo. il numero descrive il rapporto di quanti pixel "reali" (pixel fisici dello schermo) vengono utilizzati per visualizzare un pixel "virtuale" (dimensione impostata in CSS).

— oezi
fonte

4

come faccio a sapere se un dispositivo utilizza una misurazione di pixel virtuale e di cosa si tratta? e come posso usare i pixel del dispositivo nelle misurazioni CSS e non il virtuale?

— Ilyo,

purtroppo, devi

— cercarlo

9

L'articolo di Boris Smus Immagini DPI elevato per densità pixel variabili ha una definizione più accurata del rapporto pixel del dispositivo: il numero di pixel del dispositivo per pixel CSS è una buona approssimazione, ma non l'intera storia.

Si noti che è possibile ottenere il DPR utilizzato da un dispositivo con window.devicePixelRatio.

— Sam Dutton
fonte

che cos'è esattamente il rapporto pixel del dispositivo?