ipad - que - Safari para dispositivos móviles: la rotación del dispositivo provoca una mala ampliación del sitio web

mobile safari iphone

Question

Tengo un sitio web móvil para iPhone y iPad donde deshabilito el usuario con zoom

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

Esto funciona bien siempre que el sitio esté en modo horizontal. El ancho del sitio web es exactamente el ancho de la pantalla. luego, si giro el dispositivo en modo retrato, se reduce para que se ajuste al nuevo ancho (más corto). esto también está bien.

pero luego, si lo vuelvo a colocar en modo horizontal, de repente se escala al 125%, lo que significa que ahora es posible el desplazamiento horizontal y no es posible hacer zoom desde el principio, inicialmente deshabilitado.

¿Cómo puedo hacer que vuelva al 100% del zoom cuando lo gire de vuelta al paisaje?

¡Gracias!

Answer 1

Desactivar el zoom es una mala idea. No es una solución perfecta, pero la reducción del tamaño de la fuente a los cambios de orientación de webkit puede ayudar a minimizar el problema. Dejarías la cabecera del documento con:

<meta name="viewport" content="width=device-width, initial-scale=1">

Entonces direccionarías la escala de tamaño de fuente en tu CSS de esta manera:

body {
    font-size: 1.5rem;
    line-height: 2.3rem;
    -webkit-text-size-adjust: 100%;
}
/* This prevents mobile Safari from freely adjusting font-size */**

Answer 2

El uso de la maximum-scale minimum-scale para detener el zoom realmente no funcionan porque entonces le quita la capacidad al usuario para hacer zoom. Eso es realmente una mala idea porque hace que sus usuarios con malos ojos se enojen porque su sitio web no hace zoom, mientras que otros sitios sí lo hacen ...

Probé tiempos de espera y todo tipo de javascript de lujo, luego encontré esto: https://github.com/scottjehl/iOS-Orientationchange-Fix

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

En esa publicación, 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 envuelta muy bien en un IIFE para que no tenga que preocuparse por los problemas de espacio de nombre.

Simplemente colóquelo en su script (no en document.ready() si está usando jQuery) y viola!

Todo lo que hace es deshabilitar el zoom en eventos de devicemotion que indican que la 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 sostiene el ipad en ángulo. Además, no creo que este evento esté disponible para los iPads gen 1

Answer 3

Intenta experimentar con la escala máxima y la escala mínima como tal.

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0" />

Y mira si puedes lograr lo que buscas.