170

Esto se menciona en todos los artículos sobre la web móvil, pero en ninguna parte puedo encontrar una explicación de qué mide exactamente este atributo.
¿Alguien puede explicar qué hacen las consultas como esta?

@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
fuente

161

Respuesta corta

La relación de píxeles del dispositivo es la relación entre píxeles físicos y píxeles lógicos. Por ejemplo, el iPhone 4 y el iPhone 4S informan una relación de píxeles del dispositivo de 2, porque la resolución lineal física es el doble de la resolución lineal lógica.

Resolución física: 960 x 640
Resolución lógica: 480 x 320

La formula es:

$linres_p / linres_l$

Dónde:

$linres_p$ es la resolución lineal física

y:

$linres_l$ es la resolución lineal lógica

Otros dispositivos informan diferentes proporciones de píxeles del dispositivo, incluidos los no enteros. Por ejemplo, el Nokia Lumia 1020 reporta 1.6667, el Samsumg Galaxy S4 reporta 3, y el Apple iPhone 6 Plus reporta 2.46 (fuente: dpilove ) . Pero esto no cambia nada en principio, ya que nunca debe diseñar para un dispositivo específico.

Discusión

El "píxel" de CSS ni siquiera se define como "un elemento de imagen en alguna pantalla", sino más bien como una medida angular no lineal del $0.0213 °$ ángulo de visión, que es aproximadamente $1/96$ de una pulgada con el brazo extendido. Fuente: Longitudes absolutas CSS

Esto tiene muchas implicaciones cuando se trata de diseño web, como preparar recursos de imágenes de alta definición y aplicar cuidadosamente diferentes imágenes en diferentes proporciones de píxeles del dispositivo. No querría forzar a un dispositivo de gama baja a descargar una imagen de muy alta resolución, solo para reducirla localmente. Tampoco desea que los dispositivos de gama alta aumenten las imágenes de baja resolución para una experiencia de usuario borrosa.

Si está atascado con imágenes de mapa de bits, para acomodar muchas proporciones de píxeles de dispositivos diferentes, debe usar las consultas de medios CSS para proporcionar diferentes conjuntos de recursos para diferentes grupos de dispositivos. Combina esto con buenos trucos como background-size: covero establece explícitamente los background-sizevalores porcentuales.

Ejemplo

#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'); }
}

De esta manera, cada tipo de dispositivo solo carga el recurso de imagen correcto. También tenga en cuenta que la pxunidad en CSS siempre opera en píxeles lógicos .

Un caso para gráficos vectoriales

A medida que aparecen más y más tipos de dispositivos, se vuelve más difícil proporcionarles a todos los recursos de mapa de bits adecuados. En CSS, las consultas de medios son actualmente la única forma, y en HTML5, el elemento de imagen le permite usar diferentes fuentes para diferentes consultas de medios, pero el soporte aún no es del 100% ya que la mayoría de los desarrolladores web todavía tienen que soportar IE11 por un tiempo más ( fuente: caniuse ) .

Si necesita imágenes nítidas para íconos, arte lineal, elementos de diseño que no sean fotos , debe comenzar a pensar en SVG, que se adapta perfectamente a todas las resoluciones.

— Anders Tornblad
fuente

1

Gracias, entonces si hago un archivo CSS para iPhone 4 y le doy a la página medidas CSS de 480 x 320 y lo width=device-widthtendré extendido a pantalla completa.

— ilyo

1

Exactamente. Y si está utilizando imágenes de alta resolución background-image, puede combinarlas con -webkit-background-size:50%, porque de lo contrario, el tamaño de la imagen seguirá el recuento lógico de píxeles. w3.org/TR/2002/WD-css3-background-20020802/#background-size

— Anders Tornblad

2

No puedes Tendrá que diseñar sus elementos con píxeles lógicos y usar imágenes de mayor resolución y el background-sizetruco para usar la pantalla de manera óptima.

— Anders Tornblad el

2

No tengo idea sobre el caso de Android. Podría ser que diferentes fabricantes tengan ideas diferentes sobre píxeles lógicos y físicos ... Pruébelo usted mismo en un par de cientos de dispositivos diferentes ... O simplemente suponga que los valores informados por el dispositivo son correctos. ¡No diseñe para dispositivos específicos, sino que diseñe para rangos de valores utilizando consultas de medios!

— Anders Tornblad

2

@atornblad Creo que debería ser "... entre píxeles físicos y lógicos "

— Ilya Buziuk

159

Device Pixel Ratio == CSS Pixel Ratio

En el mundo del desarrollo web, la relación de píxeles del dispositivo (también llamada CSS Pixel Ratio) es lo que determina cómo el CSS interpreta la resolución de pantalla de un dispositivo.

El CSS de un navegador calcula la resolución lógica (o interpretada) de un dispositivo mediante la fórmula:

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

Por ejemplo:

Apple iPhone 6s

Resolución real: 750 x 1334
Relación de píxeles CSS: 2
Resolución lógica:

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

Al ver una página web, el CSS pensará que el dispositivo tiene una pantalla de resolución de 375x667 y las Consultas de medios responderán como si la pantalla fuera de 375x667 . Pero los elementos renderizados en la pantalla serán dos veces más nítidos que una pantalla real de 375x667 porque hay el doble de píxeles físicos en la pantalla física.

Algunos otros ejemplos:

Samsung Galaxy S4

Resolución real: 1080 x 1920
Relación de píxeles CSS: 3
Resolución lógica:

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

iphone 5s

Resolución real: 640 x 1136
Relación de píxeles CSS: 2
Resolución lógica:

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

¿Por qué existe la relación de píxeles del dispositivo?

La razón por la que se creó la relación de píxeles CSS es porque las pantallas de los teléfonos obtienen resoluciones más altas, si cada dispositivo todavía tiene una relación de píxeles CSS de 1, las páginas web se volverán demasiado pequeñas para verlas.

Un monitor de escritorio típico de pantalla completa es de aproximadamente 24 "a una resolución de 1920x1080. Imagine si ese monitor se redujera a aproximadamente 5" pero tuviera la misma resolución. Ver cosas en la pantalla sería imposible porque serían muy pequeñas. Pero los fabricantes están saliendo con pantallas de teléfono de resolución 1920x1080 consistentemente ahora.

Por lo tanto, la relación de píxeles del dispositivo fue inventada por los fabricantes de teléfonos para que pudieran continuar presionando la resolución, la nitidez y la calidad de las pantallas del teléfono, sin hacer que los elementos en la pantalla sean demasiado pequeños para verlos o leerlos.

Aquí hay una herramienta que también te dice la densidad de píxeles de tu dispositivo actual:

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

— Jake Wilson
fuente

El artículo de Wikipedia ha sido eliminado. :-( ¿Esta información está disponible en otro lugar?

— Simon East

1

Por lo tanto, las imágenes se estiran para coincidir con ppp o píxeles físicos altos. Digamos que la imagen es 300px, el px / css lógico también es 300 pero el px físico es 600, luego establecer el ancho de la imagen significaría que la imagen se estiró ... También escuché que a veces las imágenes se muestran más pequeñas en dpi alto, ¿por qué?

— Muhammad Umer

2

@MuhammadUmer En su ejemplo, una imagen de 300 px width: 100%será el ancho completo de la pantalla. No se estirará. La pantalla "piensa" que es una pantalla de 300 px. Las imágenes se muestran de acuerdo con la resolución lógica / CSS. Ahora, en su ejemplo, también podría servir una imagen de 600px. Será el ancho completo de la pantalla lógica de 300 píxeles, pero dado que su pantalla es nativa de 600 píxeles, la imagen tendrá el doble de nitidez que su imagen original de 300 píxeles. Imagen más grande, pero se ve mejor ya que la pantalla tiene todos esos píxeles adicionales. Esta es la idea detrás de "Retina Displays".

— Jake Wilson el

@JakeWilson: Este es un tema nuevo para mí y no lo entiendo completamente. En el ejemplo CSS ratio de píxeles = 2. La imagen tiene 300 píxeles físicos de ancho, en CSS la configuramos al 100%, por lo que tendrá 300 píxeles CSS de ancho. Como la relación CSS px es 2, tendrá 600 píxeles físicos de ancho y su ancho coincidirá exactamente con el ancho de la pantalla. Pero, ¿por qué no se estira si su ancho original es de 300 px físicos y ahora es de 600 px físicos? Entiendo que su calidad es menor porque se extendió físicamente de 300 a 600 px. ¿Puedes explicar esto un poco más, por favor?

— Peter

1

@ Anuj No lo sé y realmente no importa cómo se define en el hardware / software. Uno se calcula a partir del otro de cualquier manera que lo corte.

— Jake Wilson

9

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

-moz-device-pixel-ratio
Proporciona el número de píxeles del dispositivo por píxel CSS.

esto casi se explica por sí mismo. el número describe la proporción de la cantidad de píxeles "reales" (píxeles físicos de la pantalla) que se utilizan para mostrar un píxel "virtual" (tamaño establecido en CSS).

— oezi
fuente

44

¿Cómo sé si un dispositivo utiliza en absoluto una medición virtual de píxeles y qué es? ¿Y cómo uso los píxeles del dispositivo en las mediciones CSS y no en el virtual?

— ilyo

lamentablemente, tienes que

— buscarlo

9

El artículo de Boris Smus High DPI Images for Variable Pixel Densities tiene una definición más precisa de la relación de píxeles del dispositivo: el número de píxeles del dispositivo por píxel CSS es una buena aproximación, pero no toda la historia.

Tenga en cuenta que puede obtener el DPR utilizado por un dispositivo con window.devicePixelRatio.

— Sam Dutton
fuente

¿Qué es exactamente la relación de píxeles del dispositivo?