Me estaba costando encontrar la manera de expresar esto. Lo siento si esta es una pregunta de novato, soy nuevo en el diseño receptivo y el diseño web móvil en general.
Mi teléfono (Galaxy s10e) representará mi página web como si tuviera un ancho de 360 píxeles, con todos los elementos colocados de manera adecuada en función de este ancho. Tengo varias etiquetas de imagen en el sitio que tienen el mismo ancho. Estaba usando imágenes src que tienen un ancho de 360 px, y esto se ve bien en el escritorio porque en realidad está renderizando mis imágenes a 360 px, pero en el móvil las imágenes solas parecen renderizarse a una resolución mucho más alta, lo que hace que se vea terrible debido a la ampliación .
Si alguien pudiera explicarme qué está pasando aquí, sería de gran ayuda, ya que no puedo encontrar información sobre este comportamiento específico. Algunas preguntas que tengo:
Gracias por tu tiempo. Avíseme si tiene alguna otra pregunta. Estoy usando ReactJS para desarrollar el sitio.
Bien, en pocas palabras, los píxeles son tamaños relativos. Un píxel no es literalmente un píxel en su teléfono.
Lo que sucede es que PPI se activa y básicamente se acerca para que las cosas sean legibles.
Porque si realmente intentaras ver 360px en un teléfono con esa densidad de píxeles, realmente no verías nada.
Así que echemos un vistazo a algunas especificaciones del teléfono:
6.1 PULGADAS
5,90 x 2,77 x 0,31 PULGADAS
Resolución 1440 x 3040 PX ~ 550 PIXELS POR PULGADA
Ventana de visualización 360 x 760 PX 138 PÍXELES POR PULGADA
Ahora la ventana gráfica es lo que realmente ves en la pantalla. en este caso, le da una proporción de píxeles de 4. Eso significa que su teléfono tiene una resolución 4 veces mayor que la de su ventana gráfica.
por lo tanto, para una aplicación web donde un div se establece en 200 px de ancho, mostrará 200 px como se esperaría en función de la ventana gráfica, pero este div tiene en realidad 800 px de ancho en relación con la resolución de su teléfono.
Ahora las imágenes no necesitan esta limitación. ¿Cuál es el punto en una pantalla de alta resolución si sus imágenes solo muestran 200px con una densidad de píxeles de una cuarta parte de la capacidad de sus pantallas?
Entonces, una imagen vive en una realidad dual en su teléfono. Tiene un tamaño de cuadro que es el tamaño de la imagen en relación con su ventana gráfica, pero la imagen en sí dentro del cuadro vive dentro de su resolución en relación con los píxeles de pantalla totales de sus dispositivos.
Entonces, cuando tiene una imagen de 200 px en la ventana gráfica, su resolución de visualización es en realidad 800 px. Entonces, cuando pones una imagen de solo 200 px y la tienes en una pantalla que escala la ventana gráfica, que hoy en día es prácticamente todo, estás estirando efectivamente esa imagen a cuatro veces su tamaño real. o cualquiera que sea la relación de densidad de píxeles de la pantalla con respecto a la ventana gráfica. AKA parece una mierda.
Y para responder a sus necesidades sobre esto, solo lo remitiré aquí a MOZ, quien explicará los por qué y cómo, y le mostrará qué hacer para combatir esto.
Combatir la posición del elemento es bastante fácil, solo usa:
<meta name="viewport" content="width=device-width, initial-scale=1" /> En tu <head> ,