ios - navegador - ¿Por qué el emulador de Google Chrome muestra el iPhone 6 en una resolución de 375x667?
navegador iphone 5 (1)
Estoy intentando adaptar los tamaños de imagen de mi sitio web para dispositivos de diferentes tamaños. Pero ahora tengo problemas para decir qué tamaños realmente necesito. En el emulador de Google Chrome, veo que algunas de mis imágenes han aumentado de tamaño, por ejemplo, en el iPhone 6, se muestran desde 230x230 naturales hasta 357x357. La imagen ocupa casi todo el ancho de la pantalla emulada y se ve un poco degradada, lo que sugiere que el ancho del iPhone 6 no es mucho mayor que 357 píxeles.
¡Pero Apple dice que el iPhone 6 tiene una resolución de 750x1334! Si eso fuera cierto, la imagen debería verse mucho peor, pensaría.
También he encontrado información contradictoria en el iPhone 4.
Este sitio habla de iPhone 4 a 640x960 píxeles. El emulador de Chrome nuevamente lo muestra en la mitad de esas dimensiones, 320x480.
Esta pregunta de stackoverflow dice que "la pantalla del iPhone es definitivamente de 320x480".
¿Que me estoy perdiendo aqui? ¿Por qué algunas fuentes (incluida Apple) suministran dimensiones que son el doble de lo que dicen el emulador de Chrome (y mis imágenes)?
Relájate, estás a punto de entender este lío. Solo note que 2 * 375x667 = 750x1334 .
Un pixel no es un pixel
La clave es: un píxel de dispositivo es diferente de un píxel de CSS .
Son iguales en dispositivos de baja densidad de píxeles como la pantalla de su computadora (96 dpi). Sin embargo, los dispositivos de alta densidad de píxeles, como los teléfonos inteligentes y las impresoras (más de 160 ppp), intentan obedecer las especificaciones generales de W3C CSS3, entendiendo que un píxel CSS siempre debe estar cerca de 1/96 de pulgada (o 0.26 mm) cuando se ve desde la distancia habitual (longitud del brazo).
No obedecen la especificación de la letra, ya que eso implicaría que 1px es exactamente 1/96 de una pulgada real en la configuración de alta resolución de ppp, que nunca se implementó en ningún navegador AFAIK. Sin embargo, intentan que sus píxeles CSS no sean tan minúsculos a pesar de las densidades de píxeles muy altas al hacer que un píxel CSS sea igual a dos o más píxeles de dispositivo .
Chrome Device Mode funciona con píxeles de CSS , que es lo que debe usar para diseñar texto, barras de navegación, encabezados, etc., pero no imágenes de alta resolución. Para estos, lea la siguiente sección.
Si no lo notaste, la imagen de arriba muestra que el Modo de dispositivo Chrome te muestra la escala del dispositivo (cuántos píxeles del dispositivo equivalen a un píxel CSS).
Resolución de la imagen de fijación
Como ya sabe, esto afecta negativamente a las imágenes, ya que el navegador también escala la imagen. Su imagen de píxeles de 230x230 CSS se convierte en 460x460 píxeles de dispositivo , utilizando la misma calidad. Para solucionarlo, use el atributo srcset para que los enlaces del navegador a diferentes archivos de resolución de la misma imagen.
Ejemplo (adaptado del enlace anterior):
<img src="wolf-400.jpg" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w">
Un iPhone 6 mirará eso y pensará "oh, pretendo tener 375px ancho pero en realidad tengo 750px , así que descargaré wolf-800.jpg ".
Simplemente no olvides usar src="" para compatibilidad. Además, a menos que use sizes="" , el navegador se establecerá de forma predeterminada en todo el ancho del dispositivo.