javascript - zoom jquery

Forzar el zoom de la página al 100% con JS

Question

Creé un pequeño juego en Canvas, pero tengo un problema. Algunos usuarios que tienen el zoom predeterminado establecido en un valor diferente al 100% no pueden ver la página completa del juego.

He intentado usar este CSS:

zoom: 100%;

Este HTML

<meta name="viewport" content="initial-scale=1.0 , minimum-scale=1.0 , maximum-scale=1.0" />

Y este JS:

style="zoom: 75%"

¿Alguna idea de cómo programar el zoom de la página?

Answer 1

Creo que esta es una respuesta muy útil para detectar el nivel de zoom de la página en todos los navegadores modernos . Entonces la respuesta a tu pregunta para IE:

document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;

Answer 2

La única forma en que encontré que funciona de forma nativa es en el diseño de mi HTML / CSS con las unidades "vw" y "vh" (% en relación con la ventana gráfica) en lugar de "px". Puede usarlo en todos los lugares que usó para poner "px" (tamaño de fuente, ancho, altura, relleno, margen, etc.). Muy útil para una página diseñada para mostrarse solo en pantalla completa (sin desplazamiento) o "estilo kiosco". "vw" y "vh" no se ven afectados por el zoom del navegador. Consulte: https://www.w3schools.com/cssref/css_units.asp

Answer 3

Puede configurar la propiedad de zoom en la carga de la página

document.body.style.zoom = 1.0

Pero, el zoom no es una propiedad estándar para todos los navegadores , recomiendo usar la transform lugar.

var scale = ''scale(1)'';
document.body.style.webkitTransform =  scale;    // Chrome, Opera, Safari
 document.body.style.msTransform =   scale;       // IE 9
 document.body.style.transform = scale;     // General

http://jsfiddle.net/5RzJ8/

Answer 4

Puede restablecer el código con esto:

$("input, textarea").focusout(function(){
    $(''meta[name=viewport]'').remove();
    $(''head'').append(''<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">'');

    $(''meta[name=viewport]'').remove();
    $(''head'').append(''<meta name="viewport" content="width=device-width, initial-scale=yes">'' );
});