javascript - maximum - meta viewport no zoom
¿Puedo cambiar la metaetiqueta de la ventana gráfica en safari móvil sobre la marcha? (3)
Esto ha sido respondido en su mayor parte, pero voy a ampliar ...
Paso 1
Mi objetivo era habilitar el zoom en ciertos momentos y desactivarlo en otros.
// enable pinch zoom
var $viewport = $(''head meta[name="viewport"]'');
$viewport.attr(''content'', ''width=device-width, initial-scale=1, maximum-scale=4'');
// ...later...
// disable pinch zoom
$viewport.attr(''content'', ''width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'');
Paso 2
¡La etiqueta de la ventana gráfica se actualizaría, pero el zoom de pellizco aún estaba activo! Tenía que encontrar la forma de que la página recogiera los cambios ...
Es una solución de hackeo, pero alternar la opacidad del cuerpo hizo el truco. Estoy seguro de que hay otras maneras de lograr esto, pero esto es lo que funcionó para mí.
// after updating viewport tag, force the page to pick up changes
document.body.style.opacity = .9999;
setTimeout(function(){
document.body.style.opacity = 1;
}, 1);
Paso 3
Mi problema se resolvió principalmente en este punto, pero no del todo. Necesitaba saber el nivel de zoom actual de la página para poder cambiar el tamaño de algunos elementos para que quepan en la página (piense en los marcadores del mapa).
// check zoom level during user interaction, or on animation frame
var currentZoom = $document.width() / window.innerWidth;
Espero que esto ayude a alguien. Pasé varias horas golpeándome el mouse antes de encontrar una solución.
Tengo una aplicación ajax diseñada para Safari móvil que necesita mostrar diferentes tipos de contenido. Parte del contenido que necesito escalable por el usuario = 1 otro contenido que necesito escalable por el usuario = 0. ¿Hay alguna manera de actualizar esto sobre la marcha sin refrescar la página?
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
Me doy cuenta de que esto es un poco viejo, pero, sí, se puede hacer. Algunos javascript para que comiences:
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute(''content'', ''width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'');
Simplemente cambie las partes que necesita y Mobile Safari respetará la nueva configuración.
Actualizar:
Si todavía no tiene la etiqueta de la metapantalla en el código fuente, puede agregarla directamente con algo como esto:
var metaTag=document.createElement(''meta'');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
document.getElementsByTagName(''head'')[0].appendChild(metaTag);
O si estás usando jQuery:
$(''head'').append(''<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">'');
en tu <head>
<meta id="viewport"
name="viewport"
content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" />
en algún lugar de tu javascript
document.getElementById("viewport").setAttribute("content",
"initial-scale=0.5; maximum-scale=1.0; user-scalable=0;");
... pero buena suerte con ajustarlo para su dispositivo, jugueteando durante horas ... ¡y todavía no estoy allí!