css - todos - Detener escala de DPI de Firefox(cuando la configuración de Windows es 125%)

media query min and max

Question

Actualmente estoy haciendo una página web y probarla en Chrome funciona bien, pero en Firefox, se amplía.

Esto se debe a que mi DPI en Windows está configurado en un 125%, y Firefox lo detecta y ajusta cada página web en consecuencia.

Sin embargo, mi página web no debe verse a ese nivel de zoom, las imágenes no están hechas para mostrarse tan grandes, y por lo tanto se veían borrosas / pixeladas. El diseño general de la página también está en mal estado, porque todo es muy grande.

Ahora, esto no afecta a la mayoría de las personas, ya que su DPI estaría al 100% en Windows. Sin embargo, quiero que sea el mismo en todos los navegadores.

He buscado y he encontrado soluciones para que el usuario desactive esta "función", pero quiero poder desactivarla desde mi sitio web, para que el usuario no se vea mal en primer lugar.

por ejemplo, una publicación dice:

1) Escriba about:config en la barra de direcciones
2) busque layout.css.devPixelsPerPx
3) cambia el valor de layout.css.devPixelsPerPx de -1.0 a 1.0

Pero eso no es lo que estoy buscando. ¿Hay alguna forma de desactivar esto desde CSS / HTML / algo?

Gracias.

Answer 1

Establézcalo en 1.25: eso mantiene la interfaz de usuario más grande, pero restablece el sitio web a la asignación de 100% de píxeles.

Answer 2

Esto también me frustró, pero afortunadamente hay una solución.

Navegue a about:config . (Haga clic en Aceptar en las advertencias que le indiquen que tenga cuidado con las funciones avanzadas)

Busque layout.css.devPixelsPerPx y cambie su valor a 1.0 y su problema debería solucionarse.

Fue algo implementado en Firefox 22 .

Answer 3

Podría intentar algo como esto a continuación. Hay algunas advertencias al usar esto, pero para algunas situaciones vale la pena usarlo.

    @media screen and (min-resolution: 120dpi) { 
    /*body {transform: scale(0.8);width: 125%;height: 125%;margin-left: -12.5%;}*/
    body {transform: scale(0.8);transform-origin:top left;width: 125%;height: 125%;}
}

/*body....*/ escala de ejemplo comentado /*body....*/ puede ser más fácil de entender pero peor, porque la escala debe realizarse en función del borde superior izquierdo de la regla css de origen de transformación. Entonces las cosas se pueden mejorar, especialmente en Chrome.

si usa width: 125% , su css RWD debería reaccionar de forma diferente a los cambios en los tamaños de navegador a causa de esto de lo que esperaba cuando la relación de pantalla era del 100%. Y es posible que acepte razonablemente esto, esto es RWD y la diferencia es del 25%. Pero algunas personas pueden querer adaptar su CSS así:

@media screen and (min-width: 1000px)

también necesitas ajustar:

@media screen and (min-width: 800px)

probablemente no sea 1250px pero 800px como lo hice.

Edge, Chrome, FF son bastante buenos. IE 11 rindió lo peor pero no sin esperanza.

Hay algunos problemas en FF (no edge, chrome) al expandir los campos de selección - solución css select. Algunos bordes pueden ser visibles, algunos desaparecen en FF (quizás no borde, cromo)

Puede haber algunos problemas que no se mencionan aquí, como cuando utiliza carrusel como owlcarousel en su página.

Sin embargo, creo que es una mayor probabilidad de ahorrar más tiempo con este ejemplo probado muy poco.

Debe usar escalas exactas como 0,8 para una pantalla del 125% para que sus imágenes se muestren lo más nítidas posible.

Noté que al cambiar a diferentes resoluciones de dpi usando ctrl + / i en un navegador de escritorio y usar gestos multitáctiles en navegadores móviles, un navegador también cambia los dpi, por lo que cualquier solución que use @media min / max-resolution puede no funcionar como se esperaba . Lo que se necesita en CSS es leer la resolución del sistema no un navegador. Sin embargo, como veo, este cambio de resolución no ocurre así cuando alguien cambia el tamaño del navegador manualmente o girando un dispositivo móvil.

Gracias Tatsuyuki Ishi por corregir algunos errores de mi respuesta.

Answer 4

Podrías dejar fácilmente que tu sitio web se dirija a los usuarios con configuraciones en niveles de zoom más altos al incluir una consulta de medios como:

@media only screen and( -webkit-min-device-pixel-ratio: 1.25 ),
       only screen and(      -o-min-device-pixel-ratio: 5/4 ),
       only screen and( min-resolution: 120dpi ),
       only screen and( min-resolution: 1.25dppx ) {
    body {
        font-size: 1rem;
    }
} 

Consulte este artículo para obtener una explicación detallada y por qué la solución limpiada de la consulta de medios es suficiente para una amplia compatibilidad con navegadores: IE9 +, Fx3.5 +, Opera9.5 +, Navegadores Web Chrome y Safari, tanto de escritorio como de dispositivos móviles.