Restablecer escala/ancho/zoom de Safari en el iPhone usando JavaScript/onorientationchange

Question

Estoy mostrar contenido diferente dependiendo de cómo el usuario es la celebración de su teléfono a través de la onorientationchange llamada en el cuerpo de la etiqueta.Esto funciona muy bien - puedo ocultar un div, mientras que la otra visible.

El div en el modo de retrato se ve muy bien en la primera carga.Puedo usar esto para obtener la escala de la derecha/zoom:

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

Incluso si el contenido en el modo de retrato atropellado, el ancho es correcta y el usuario puede desplazarse hacia abajo.La pantalla en modo horizontal, es demasiado perfecto.Sin embargo, si el contenido en el modo de paisaje requiere que el usuario la desplácese hacia abajo, a continuación, cuando el usuario vuelve al modo vertical, la pantalla se "aleja", por así decirlo.Esto sucede si el usuario se desplaza hacia abajo, mientras que en el modo de paisaje.

He intentado muchas cosas diferentes para tratar de obtener la escala/zoom/ancho de la pantalla de la derecha, pero no hubo suerte.Hay alguna forma de hacer esto?

Gracias de antemano!

Answer 1

Esto es lo que uso para manejar el zoom en mis consultas de medios:

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

La escala máxima es lo que me vendió. Significa que la transición de vertical a horizontal en un iPhone es realmente fluida, sin ningún problema de zoom ...

Answer 2

La " respuesta " aceptado anteriormente no es realmente una respuesta, ya que no permitir ningún acercamiento es tan malo como pedirle a un usuario de IE que cambie a otro navegador. Es terrible para la accesibilidad. Desea que su diseño no haga cosas funky de zoom que Apple ha considerado ideal al cambiar la orientación de la vista, pero está dejando a los usuarios discapacitados en el polvo. Muy no recomendado.

Intente usar consultas de medios o un gancho js (screen.width, etc.) para ajustar su diseño automáticamente al cambiar la orientación. Es por eso que estos atributos están expuestos a nosotros como desarrolladores.

Answer 3

Tuve algunos problemas con los niveles de zoom que cambiaban de horizontal a vertical, cuando el contenido era más grande que la ventana gráfica. Establecer & Quot; mínimo-escala = 1.0 & Quot ;, lo resolvió por mí.

Answer 4

Esto no funcionará si está ejecutando una aplicación web en safari, pero creo que funcionará si está utilizando un UIWebView dentro de su propia aplicación.

No he probado esto, pero hay una manera fácil de hacer que su javascript se comunique con el lado objetivo-c del código, en cuyo punto tendría acceso a cosas como el zoom de la vista web.

Answer 5

También tuve este problema, creo. Intente poner un & Quot; maximum-scale = 1.0 & Quot; (y tal vez una & "; minumum-scale = 1.0 &"; si lo desea) en su etiqueta de ventana gráfica. Sin embargo, esto supone que no desea que el usuario pueda escalar (que yo no)

Answer 6

El uso de meta tags para que esto no funciona.He probado todas las combinaciones de los meta tags y orientationchange y gesturechange los eventos posibles, traté de tiempos de espera y todo tipo de fantasía javascript, entonces me encontré con esto:https://github.com/scottjehl/iOS-Orientationchange-Fix

a través de esta pregunta relacionada con: ¿Cómo puedo restablecer la escala de zoom de una aplicación web en un cambio de orientación en el iPhone?

En ese post, Andrew Ashbacher envió un enlace al código escrito por Scott Jehl:

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);

Que es una solución muy bien envuelto en un IIFE así que usted no tiene que preocuparse de nombre-problemas de espacio.

Acabo de caer en tu script (no en document.ready() si estás usando jQuery) y la viola!

Todo lo que hace es desactivar el zoom en devicemotion eventos que indican que orientationchange es inminente.Es la mejor solución que he visto, porque lo que realmente funciona y no desactivar el zoom.

EDITAR:este enfoque no siempre es fiable, especialmente cuando usted está sosteniendo el ipad en un ángulo.además, no creo que este evento está disponible a gen 1 ipads

Answer 7

Puede establecer la propiedad user-scalable en el atributo de contenido. Prueba esto:

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

De esta respuesta :

  

Pero si asigna User-scalable = no, significa que el sitio web no permite acercar o alejar.