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

Question

Estoy mostrando diferentes contenidos dependiendo de cómo el usuario está sosteniendo su teléfono usando la llamada onorientationchange en la etiqueta de cuerpo. Esto funciona genial: escondo un div mientras hago el otro visible.

El div en modo retrato se ve muy bien en la primera carga. Lo utilizo para obtener la escala/zoom derecha:

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

Incluso si el contenido en modo vertical atropellado, el ancho es correcta y el usuario puede desplazarse hacia abajo. La pantalla en modo horizontal también es perfecta. Sin embargo, si el contenido en modo horizontal requiere que el usuario se desplace hacia abajo, cuando el usuario regrese al modo vertical, la pantalla se "alejará", por así decirlo. Esto sucede tanto si el usuario se desplazó hacia abajo mientras estaba en modo horizontal.

He intentado muchas cosas diferentes para tratar de obtener la escala/zoom/ancho de la pantalla correcta, pero no tuve suerte. ¿Hay alguna manera de hacer esto?

¡Gracias de antemano!

Answer 1

Aquí es lo que uso para tratar con el zoom de mis medios de comunicación-consultas:

<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 del retrato al paisaje en un iphone es realmente sencilla sin problemas de zoom ...

Answer 2

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 obtener su javascript para hablar con el lado objetivo c del código y en ese punto tendría acceso a cosas como el zoom de la vista web.

Answer 3

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 this answer:

Pero si asigna el usuario escalable = sin su página web medios que permiten acercar o alejar la imagen.

Answer 4

Tuve este problema también, creo. Intenta poner una "escala máxima = 1.0" (y tal vez una "escala mínima = 1.0" si así lo desea) en la etiqueta de su ventana gráfica. Esto supone que no desea que el usuario sea capaz de escala, aunque (que yo no)

Answer 5

Tuve algunos problemas con los niveles de zoom que cambiaban de paisaje a retrato, cuando el contenido era más grande que la ventana gráfica. Configurando "minimum-scale = 1.0", resolvió esto para mí.

Answer 6

La "respuesta" aceptada anteriormente no es realmente una respuesta, ya que no permitir el uso de ningún zoom 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 zoom funky cosas que Apple ha considerado ideales al cambiar la orientación de la vista, pero está dejando a los usuarios discapacitados en el polvo. Muy no recomendado

Intente utilizar las consultas de medios o un gancho js (pantalla.ancho, 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 7

Usar etiquetas meta para esto no funciona. He probado todas las combinaciones de las etiquetas meta y orientationchange y gesturechange eventos posibles, probé los tiempos de espera y todo tipo de Javascript de fantasía, entonces me encontré esto: https://github.com/scottjehl/iOS-Orientationchange-Fix

a través de esta pregunta relacionada: How do I reset the scale/zoom of a web app on an orientation change on the iPhone?

En ese puesto , Andrew Ashbacher publicó 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); 

Esa es una solución muy bien envuelto en una IIFE por lo que no tiene que preocuparse por problemas de espacio de nombres.

¡Solo tiene que colocarlo en su script (no en document.ready() si está usando jQuery) y viola!

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

EDITAR: este enfoque no siempre es confiable, especialmente cuando se sostiene el ipad en un ángulo. Además, no creo que este evento esté disponible para gen 1 ipads