¿Cómo manejas el zoom del navegador del cliente?

Tengo muchas imágenes en una página, una galería. Quiero que las imágenes se mantengan nítidas, así que no escalo el navegador, uso las dimensiones originales de la imagen.

Sin embargo, esto solo funciona cuando el nivel de zoom del navegador es del 100%. Cuando aumento o disminuyo el nivel de zoom, disminuye la calidad de las imágenes.

Algunos clientes en realidad tienen diferentes niveles de zoom por defecto. Me preguntaba, ¿cómo puedes manejarlo y lo manejamos nosotros?

Aclamaciones

Creo que la mayoría de las otras respuestas han perdido el punto: no se trata de anular las preferencias del usuario, se trata de dar imágenes de la mejor calidad en el escenario común del dispositivo de un usuario que asigna más de un píxel físico para cada píxel CSS, también conocido como " píxel de referencia "en su imagen, lo que hace que el navegador amplíe la imagen, haciéndola pixelada y granulada.

Mis soluciones sugeridas a continuación, pero primero aquí están las cuatro formas en que esto puede suceder:

• Lo más raro: el usuario elige hacer un acercamiento . No es un gran problema, ya que es su elección.
• Sorprendentemente común: el navegador del usuario está ampliado de forma predeterminada . Por ejemplo, muchas máquinas Windows de alta densidad de píxeles tienen un zoom de 125% o más de forma predeterminada, y Firefox recientemente (¡confusamente!) Lo hizo, por lo que en estos casos les dice a los usuarios que tienen un zoom de 100% cuando realmente lo hacen de 125%. , dejándolos rascándose la cabeza preguntándose por qué todo de repente parece granulado.
• Muy común: la mayoría de los dispositivos Android (¿y otros dispositivos?) Tienen una relación de píxeles superior a 1. Esto significa que cada "píxel CSS" en realidad se muestra usando más de un píxel físico, por lo que una imagen de 200px por 200px width: 200px; height: 200px;realmente se escalará esa imagen de 200 px por 200 px en más de 200 x 200 píxeles, lo que puede hacer que sea granulada.
• Muy común: muchos dispositivos modernos de Apple tienen " pantallas retina ". Esto es esencialmente lo mismo que un dispositivo Android con una relación de píxeles de 2, pero con un mejor marketing y algunas propiedades personalizadas que permiten detectarlo por nombre.

Cualquiera de estos resultará en el problema de John de una galería de imágenes que se ve sorprendentemente granulada.

Esperaba que alguien tuviera una gran solución a este problema, pero por ahora estas son mis opciones preferidas, comenzando con la más efectiva pero menos universalmente posible:

1. Si es posible, vaya a vector - SVG (o Raphael.js si aún necesita admitir IE8). Siendo realistas, esta es solo una opción para iconos, diagramas, etc., y nunca es una opción para fotografías. SVG muy complejo también puede ser torpe en móviles de gama baja debido al procesamiento requerido.
2. Si es posible, detecte la proporción de píxeles del dispositivo y sirva imágenes basadas en eso. Esto también puede resolver el problema de Firefox en Windows porque Firefox en Windows cambia su lectura de las proporciones de píxeles cuando se acerca y se aleja. La desventaja es que se convierte en un problema de codificación complicado que involucra trabajo de desarrollo en el lado del servidor y del cliente.

3. Si 1. y 2. no son posibles, pero es realmente importante y la calidad de la imagen es más importante que, por ejemplo, el tiempo de carga, simplemente duplique la imagen.

   • Esto es lo que Google hace con su logotipo en su página de inicio: aplastan una imagen PNG de 538 px x 190 px en un contenedor de 269 px x 95 px. También es más o menos lo mismo que el funcionamiento de las imágenes receptivas.

   • Esto solía considerarse una mala práctica porque las versiones antiguas de IE eran terribles para reducir las imágenes, pero ahora se usan muy raramente y son mucho menos comunes que las pantallas de alta densidad de píxeles. Todavía es algo indeseable, ya que aumentará el tamaño de la imagen y, por lo tanto, aumentará el tiempo de carga; eso es una compensación que debe juzgar caso por caso.

   • Duplicar el tamaño es común porque muy pocos dispositivos tienen una proporción mayor que 2, muy pocos usuarios tienen un zoom de más del 200% y el escalado de las imágenes al 50% es más limpio que otras cantidades.
4. Si 1, 2 no son posibles y los tiempos de carga son una prioridad demasiado alta para 3, no conozco ninguna otra opción, y mi recomendación es no preocuparse por eso, porque la mitad de los sitios en Internet tienen el mismo problema , y las personas con este problema en su sitio también tendrán este problema en otros sitios. Demonios, Firefox en Windows incluso pixela sus propios botones de interfaz de usuario ...

Como DA01 comentó, no debes hacer nada al respecto.

Zoom es una opción especificada por el usuario y, por lo tanto, está bajo su control. La configuración con la que deciden meterse no debería ser su responsabilidad.

Puede tener en cuenta diferentes navegadores y versiones y lo que no, pero en términos razonables no debe tener en cuenta el zoom de un usuario.

Claro que puede representar el 125% o el 150% (y es posible que ni siquiera tenga que hacerlo). ¿Pero 200%, 300%, más? Simplemente no tiene ningún sentido.

¿Qué sucede si el usuario usa el tema de Windows de alto contraste? ¿Qué pasa si usan constantemente la lupa? ¿A quien le importa?

Idealmente, su sitio web es lo suficientemente flexible como para no hacer una diferencia real entre la pequeña diferencia de zoom, pero las imágenes disminuirán en calidad con el zoom, pero esa no es su responsabilidad.

Por supuesto, esta es solo mi opinión, pero la compañía para la que trabajo también les dice explícitamente a los clientes que no admitimos sus preferencias de zoom.

Otras personas han dado algunos buenos consejos sobre los problemas que enfrentarás y no soy lo suficientemente bueno en esta área para hacer un buen tutorial, pero ...

Es posible que desee diseñar un sitio receptivo que se ajuste de acuerdo con la resolución / dispositivo del usuario y luego probablemente esté buscando un código que cambie las imágenes a archivos de resolución más alta o más baja cuando se solicite, en lugar de estirar y comprimir las imágenes que tiene.

La última vez que intenté hacer esto, utilicé media-query.js y picturefill.js. Ver: http://responsivedesign.is/resources/images/picture-fill . Tenía un diseño de 3 columnas donde algunas imágenes abarcarían dos columnas ... Cuando la ventana del navegador se hizo lo suficientemente pequeña, las imágenes grandes cambiarían a una versión de resolución más pequeña que solo tendría una columna de ancho. El navegador del usuario simplemente cargará la versión del archivo que necesita. (y en mi caso, el complemento de albañilería movería todo para acomodarlo).

Por supuesto, entonces su usuario debe tener javascript habilitado ...

No puede forzar la mano del usuario. La configuración de usuario no es tuya para jugar. La configuración y eludirlos es una mala idea, puede haber una razón por la cual el usuario hizo algo. En cualquier caso, no puede garantizar nada en los distintos dispositivos.

De hecho, si entras en el aspecto técnico, se vuelve aún más interesante. Realmente das las llaves del reino con tu página web. Vea que el usuario descarga la página web y ahora puede hacer lo que quiera con ella. No tiene control sobre esta capa, después de todo se ejecuta en la máquina de los usuarios y pueden hacer lo que quieran. Incluso stackexhange no se ve igual en mi computadora / móvil que en la suya. Modifico automáticamente algunos aspectos de la GUI para corregir 2 errores de representación y he agregado 2 accesos directos.

El comportamiento molesto de las imágenes de aumento de escala en las pantallas HiDPI, que conduce a fotos borrosas (también conocido como la pesadilla de los fotógrafos), también me ha preocupado durante bastante tiempo. También me preguntaba que no hay un atributo CSS simple para deshabilitar eso para las imágenes.

Mi solución actual con CSS se ve así:

@media only screen and (min--moz-device-pixel-ratio: 1.25),
    (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-device-pixel-ratio: 1.25) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.25 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.5 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.75),
    (-o-min-device-pixel-ratio: 7/4),
    (-webkit-min-device-pixel-ratio: 1.75),
    (min-device-pixel-ratio: 1.75) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.75 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 2.00),
    (-o-min-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2.00),
    (min-device-pixel-ratio: 2.00) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 2.00 - var(--pic-width) + var(--pic-width));
        }
}

El siguiente paso sería usar clases para definir y establecer diferentes tamaños de imagen si es necesario. No conozco una forma de obtener dinámicamente los tamaños de imagen. La función CSS attr () parece no funcionar para esto.

Entonces esto sería más una pregunta de programación. Pero usando JQuery, o incluso solo css plano, puede mostrar diferentes imágenes en función del ancho de pantalla de los usuarios, la altura de la pantalla, etc.

De nuevo, aunque probablemente este no sea el intercambio de pila para preguntar.

Simplemente puede hacer esto a través de HTML en la cabecera del sitio agregue esto

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Los desarrolladores no recomiendan esto para cada tipo de sitio, pero debe cumplir con lo que está pidiendo.

Espero que ayude: transformación de regla css: escala en la etiqueta del cuerpo u otra - no es perfecta, mira aquí, por favor

/programming/23099849/stop-firefox-dpi-scaling-when-windows-setting-is-at-125/42755741#42755741