Permitir el zoom dentro de marco flotante, pero no en la página en IOS

Question

Tengo una página sencilla con

<meta name="viewport" id="extViewportMeta" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 

en él, con todo muy bien de tamaño para mostrar en un iPhone.

Pero cuando pongo un iframe en esa página, todo lo que está dentro del iFrame no se puede ampliar y se adapta al tamaño de la página principal.

¿Cómo puedo permitir el acercamiento dentro del iframe solamente, sin jugar con el resto de mi página?

Answer 1

Desafortunadamente, lo que está solicitando no es posible.

En primer lugar, en su metaetiqueta 'viewport', su atributo de "contenido" especifica que el usuario de su sitio web NO PUEDE hacer zoom. Eso es lo que dicta el 'user-escalable = no'.

Además, su escala máxima y escala está establecida en 1, por lo que incluso si elimina el 'user-escalable = no', el zoom se desactivaría por el hecho de que no hay rango de escala para el usuario para acercar.

Para habilitar el zoom para el usuario, tendrá que eliminar user-scalable = no y establecer diferentes valores de escala mínima y máxima.

Vea este enlace para entender mejor la configuración de la 'ventana' etiqueta meta:

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

En segundo lugar, ya que su 'ventana' etiqueta meta se encuentra en la página de 'padre', se aplican estos ajustes a cualquier cosa dentro de esa página, es decir, el iframe también. Si el iframe tiene una etiqueta meta 'viewport' diferente que especifica diferentes configuraciones no importa, ya que vive dentro y se ajusta a la configuración de su principal.

Answer 2

Esto no es posible ya que iOS no permite el acercamiento: solo puede desplazarse por su iFrame. ¿Es este un sitio externo, que usted posee? Si es así, cambie el código CSS y añádalo a la ventana gráfica como en su pregunta en la parte superior.
Alternativamente, puede cargar los datos con PHP. Seguramente encontrará una solución para su problema; de lo contrario, puede hacer preguntas de seguimiento.

Answer 3

Esto es posible a través de jQuery. Vincule los eventos de zoom y panorámica para no hacer nada al hacer zoom y paneo fuera de los divs que permite el acercamiento y paneo. Luego, para los divs que desea permitir el zoom y la panorámica, puede usar complementos como Panzoom que usan "transformaciones CSS3 y funciones de matriz" para permitir el zoom y la panorámica.