¿Puedo cambiar la metaetiqueta de la vista en safari móvil sobre la marcha?

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?¿Puedo cambiar la metaetiqueta de la vista en safari móvil sobre la marcha?

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Fuente

2010-08-27 Pepper

133

Me doy cuenta de que esto es un poco viejo, pero sí se puede hacer. Algunos javascript para empezar:

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 piezas que necesita y Mobile Safari respetará la nueva configuración.

Actualización:

Si aún no dispone de la etiqueta meta de visualización en el origen, puede añadirlo 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á utilizando jQuery:

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">');

Fuente

2010-11-04 08:27:47 markquezada

¡Agradable!Desafortunadamente, parece que no puedo hacer que funcione. Mi situación es un poco diferente: estoy trabajando con un sitio que tiene un ancho de 980px. El contenido va directamente al borde del diseño, por lo que en un iPad, parece incómodo. Pensé que establecería la ventana gráfica con un ancho de 1020px para permitir un margen de 20px en cada lado ... pero no tuve suerte: 'viewport = document.querySelector (" meta [name = viewport] "); viewport.setAttribute ('content', 'width = 1020'); ' (Solo por algún contexto: estoy poniendo esto en una instancia de Drupal algo bloqueada ... así que no tengo acceso directo a la área de la cabeza y necesita usar Javascript) – Sam

gruñir gruñir ... Creo que sé por qué esto no funciona para mí. El fragmento anterior reescribirá el valor del ancho de la ventana meta. Ese meta no existe todavía ... no puede cambiarlo si no está allí, ¿verdad? De cualquier forma que pueda agregar ese meta con Javascript? (¡Maldita sea esta instancia de Drupal bloqueada! ¡Creo que estoy jodido!) – Sam

Esto debería ser lo suficientemente fácil. Solo escríbelo directamente. Si está utilizando jQuery sería algo como esto: '$ ('head'). Append (' ');' o, sin jQuery: 'document.getElementsByTagName (' head ') [0] .appendChild (...);' – markquezada

en su <head>

<meta id="viewport" 
     name="viewport" 
     content="width=1024, height=768, initial-scale=0, minimum-scale=0.25" />

algún lugar de su javascript

document.getElementById("viewport").setAttribute("content", 
     "initial-scale=0.5; maximum-scale=1.0; user-scalable=0;");

... pero la buena suerte con adaptándolo a su dispositivo, jugando durante horas ... y todavía no estoy allí!

source

Fuente

2011-05-05 18:58:50 sonjz

Esto ha sido contestada en su mayor parte, pero se expandirá ...

Paso 1

Mi objetivo era activar el zoom en determinados 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 actualizaría, pero el zoom pizca era todavía activo !! Tenía que encontrar la manera de hacer 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 fue resuelto sobre todo en este momento, 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.

Fuente

2016-04-27 15:43:31

Esto me salvó la vida, pero tengo un pequeño problema: suponiendo que muestre una imagen en un div superpuesto al 100% y lo acerque a un dispositivo móvil, aumentará usando la implementación del zoom del navegador nativo que generalmente escala el área visible sin ninguna representación del archivo original. Por otro lado, si elimino "width = device-width" para el estado de zoom deshabilitado, la imagen se muestra bien al hacer zoom, pero pierdo mi última posición de página cuando se cierra el 100% div ... –

¿Puedo cambiar la metaetiqueta de la vista en safari móvil sobre la marcha?

Respuesta

Cuestiones relacionadas