html - name - meta viewport bootstrap
cómo establecer el nivel de zoom usando css (4)
El zoom de página es una característica del navegador, no una configuración CSS (bueno, excepto por esa propiedad de IE, que es realmente más útil para arreglar errores de IE que nada) por lo que es una variable controlada por el usuario en lugar de cualquier cosa sobre la que tenga control.
He estado desarrollando mi aplicación web con un cierto nivel de zoom en Firefox que configuré inicialmente (usando ctrl + rueda). Ahora cuando se prueba en una PC diferente en Firefox, el 100% predeterminado parece ser demasiado grande. ¿Puedo establecer el valor predeterminado usando css?
Lo que DA dijo, el zoom es una configuración controlada por el usuario, pero puedes ajustar el tamaño del zoom, y si los usuarios no usan Ctr + - para cambiar el tamaño, sino que cambias el tamaño configurando un tamaño de fuente predeterminado, puedes utilice esta configuración predeterminada configurando un tamaño de fuente en píxeles (a diferencia de ems,%, etc.) ... Sin embargo, esto generalmente se considera una mala práctica, ya que puede hacer que las letras / tamaños sean ilegibles e inmutables para algunas personas. , que no conocen Ctr + - y dependen de un tamaño de fuente predeterminado.
Puede ajustar el tamaño en relación con los valores predeterminados del usuario y la configuración del zoom estableciendo el tamaño de fuente en ems o%. Esto cambiará el tamaño de las cosas en relación con el tamaño del conjunto del usuario.
Esto le permite hacer que cada página vea a otra persona cómo le parece a usted ... ya que la percepción de cada persona de "pequeño", "mediano" y "grande" es diferente.
Puede establecer el zoom usando el zoom de la propiedad CSS. Es un viejo elemento de IE que también es compatible con Chrome y Safari.
.zoom
{
zoom: 120%;
}
Sin embargo, esto probablemente no debería usarse en sitios en vivo ...
<html>
<body>
<div id="sampleDiv" style="width: 100px; background-color: Gray;">
Zoom Me
</div>
<button onclick="sampleDiv.style.zoom=''300%''">Zoom 300%</button>
<button onclick="sampleDiv.style.zoom=''200%''">Zoom 200%</button>
<button onclick="sampleDiv.style.zoom=''100%''">Zoom 100%</button>
</body>
</html>