javascript - online - Prevenir el zoom entre navegadores
revisar codigo html online (8)
Para una herramienta similar a un mapa, me gustaría desactivar la función de zoom del navegador . (Sé que esto generalmente es una mala idea, pero para un sitio web específico, es necesario).
Lo hice con éxito escuchando el atajo de teclado CTRL + / CTRL - y agregando e.preventDefault() , etc. Pero esto no impide cambiar el zoom desde el menú Zoom del navegador.
Lo intenté:
con CSS:
zoom: reset;Funciona para Chrome (mira esta página para ver un ejemplo ) pero no funciona en Firefox.en varias preguntas / respuestas, también encontré
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">pero esto parece funcionar solo para dispositivos móviles.
¿Cómo evitar el zoom entre navegadores?
Actualicé el código del código de Vijay:
$(document).ready(function(){
var keyCodes = [61, 107, 173, 109, 187, 189];
$(document).keydown(function(event) {
if (event.ctrlKey==true && (keyCodes.indexOf(event.which) != -1)) {
alert(''disabling zooming'');
event.preventDefault();
}
});
$(window).bind(''mousewheel DOMMouseScroll'', function (event) {
if (event.ctrlKey == true) {
alert(''disabling zooming'');
event.preventDefault();
}
});
});
Esta solución es multiplataforma (OS / Win) para navegadores de escritorio.
Creo que lo que puedes hacer es escuchar el evento de zoom del navegador (ctrl + "+") y luego buscar window.devicePixelRatio.
Luego, según corresponda, aplique la transformación de escala HTML5 en el elemento del cuerpo para reducirla en la misma proporción. Entonces, básicamente no puedes evitar la funcionalidad, pero puedes aplicar un efecto negativo con la misma magnitud.
Código POC:
<body style="position: absolute;margin: 0px;">
<div style="width: 300px; height: 200px; border: 1px solid black;">
Something is written here
</div>
<script>
var keyIncrease = [17, 61];
var keyDecrease = [17, 173];
var keyDefault = [17, 48];
var listenMultiKeypress = function(keys, callback){
var keyOn = [];
for(var i=0; i<keys.length; i++){
keyOn[i] = false;
}
addEventListener(''keydown'', function(e){
var keyCode = e.which;
console.log(keyCode);
var idx = keys.indexOf(keyCode);
if(idx!=-1){
keyOn[idx] = true;
}
console.log(keyOn);
for(var i=0; i<keyOn.length; i++){
if(!keyOn[i]){
return;
}
}
setTimeout(callback, 100);
});
addEventListener(''keyup'', function(e){
var keyCode = e.which;
var idx = keys.indexOf(keyCode);
if(idx!=-1){
keyOn[idx] = false;
}
console.log(keyOn);
});
};
var previousScale = 1;
var previousDevicePixelRatio;
var neutralizeZoom = function(){
//alert(''caught'');
var scale = 1/window.devicePixelRatio;
document.body.style.transform = ''scale(''+(1/previousScale)+'')'';
document.body.style.transform = ''scale(''+scale+'')'';
var widthDiff = parseInt(getComputedStyle(window.document.body).width)*(scale-1);
var heightDiff = parseInt(getComputedStyle(window.document.body).height)*(scale-1);
document.body.style.left = widthDiff/2 + ''px'';
document.body.style.top = heightDiff/2 + ''px'';
previousScale = scale;
};
listenMultiKeypress(keyIncrease, neutralizeZoom);
listenMultiKeypress(keyDecrease, neutralizeZoom);
listenMultiKeypress(keyDefault, neutralizeZoom);
neutralizeZoom();
</script>
</body>
</html>
Entonces, como se ha mencionado, eso realmente no es posible. Sin embargo, hay algunas formas en que puede ser inteligente al respecto.
Tres de los cinco buscadores más importantes te permiten ver el nivel de acercamiento del navegador; además, si el navegador se acercara a una window.onresize , se window.onresize evento de window.onresize .
IE: event.view.devicePixelRatio OR window.view.devicePixelRatio
Chrome: event.currentTarget.devicePixelRatio OR window.devicePixelRatio
Firefox: event.originalTarget.devicePixelRatio OR window.devicePixelRatio
Safari: /* Not possible */
Opera: /* Not possible */
Creo que las cosas después de O funcionan sobre la base de algo que noté cuando estaba jugando. Los primeros que conozco funcionan en al menos la última versión de cada uno. Tenga en cuenta que Safari y Opera tienen el devicePixelRatio , sin embargo, ambos nunca cambian. Siempre es solo 1 .
Lo de arriba es tu manera fácil si no te importa tanto. Si lo hace, entonces podría probar el script de detect-zoom , que encontré mientras buscaba soluciones para Safari y Opera.
Entonces, lo que ahora puede hacer es obtener el nivel de zoom, y luego desplazar el zoom a donde no hace nada. Entonces, si forzo mi navegador a un 50% de zoom, solo va al 200%. Por lo tanto, no hay cambio. Por supuesto, será un poco más complicado, tendrás que almacenar el último zoom del navegador, el nuevo zoom del navegador y realizar algunas operaciones matemáticas algo más complicadas, pero en función de lo que ya tienes, eso debería ser muy fácil.
Otra idea podría ser simplemente escuchar un evento de cambio de tamaño y calcular según el nuevo tamaño visible, pero eso podría causar problemas si la ventana simplemente se cambia de tamaño. Creo que lo de arriba será tu mejor opción, con quizás una alert alternativa para advertir al usuario que no haga zoom si es necesario.
Es simple:
function load(){
document.body.addEventListener("wheel", zoomShortcut); //add the event
}
function zoomShortcut(e){
if(e.ctrlKey){ //[ctrl] pressed?
event.preventDefault(); //prevent zoom
if(e.deltaY<0){ //scrolling up?
//do something..
return false;
}
if(e.deltaY>0){ //scrolling down?
//do something..
return false;
}
}
}
p {
display: block;
background-color: #eeeeee;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title>Mousewheel control!</title>
</head>
<body onload="load()">
<p>If your Mouse is in this Box, you can''t zoom.</p>
</body>
</html>
Has probado ...
$("body").css({
"-moz-transform":"scale(1)",
"-webkit-transform":"scale(1)",
"-o-transform":"scale(1)",
"-ms-transform":"scale(1)"
});
He usado este tipo de código para establecer o restablecer la escala.
Puede deshabilitar el zoom en el navegador mediante Ctrl + o Ctrl o Usar la tecla Ctrl + Rueda del mouse hacia arriba o hacia abajo mediante este código.
$(document).keydown(function(event) {
if (event.ctrlKey==true && (event.which == ''61'' || event.which == ''107'' || event.which == ''173'' || event.which == ''109'' || event.which == ''187'' || event.which == ''189'' ) ) {
event.preventDefault();
}
// 107 Num Key +
// 109 Num Key -
// 173 Min Key hyphen/underscor Hey
// 61 Plus key +/= key
});
$(window).bind(''mousewheel DOMMouseScroll'', function (event) {
if (event.ctrlKey == true) {
event.preventDefault();
}
});
Consulte una demostración aquí http://jsfiddle.net/VijayDhanvai/4m3z3knd/
Realmente no he encontrado una respuesta "autoritativa", lo que significa una declaración clara de los desarrolladores de navegadores. Sin embargo, todas las respuestas a preguntas similares que he encontrado (como esta o aquella ) sugieren lo mismo: la función de zoom del navegador existe para el beneficio de los usuarios y algunos navegadores (como Firefox) simplemente no te permiten, ya que un creador de sitios web, para quitarles esta opción.
Esta documentación podría arrojar algo de luz sobre por qué permitir a los autores deshabilitar el zoom podría ser una buena idea en los dispositivos móviles, pero no en los equipos de escritorio.
En resumen, es posible que deba evitar que los dispositivos móviles inicialmente aumenten automáticamente su sitio web, si sabe que su auto-zoom calculado será inapropiado. En los escritorios, no hay un auto-zoom, por lo que cuando los usuarios acceden a su sitio web, lo ven exactamente como debe ser visto. Si luego deciden que necesitan hacer un acercamiento a la página, no hay una buena razón para evitar que lo hagan.
En cuanto a las soluciones que has enumerado:
-
zoomes una propiedad no estándar no admitida por Firefox , y -
<meta name="viewport">se refiere solo a los dispositivos en los que la ventana gráfica de presentación y la ventana gráfica visual no son lo mismo , es decir, dispositivos móviles.
$(document).ready(function () {
$(document).keydown(function (event) {
if (event.ctrlKey == true && (event.which == ''107'' || event.which == ''109'' || event.which == ''187'' || event.which == ''189''))
{
event.preventDefault();
}
});
$(window).bind(''mousewheel DOMMouseScroll'', function (event) {
if (event.ctrlKey == true) {
event.preventDefault();
}
});
})