Safari Mobile: la rotación del dispositivo causa mal escalado de página web

Question

i tiene un sitio web móvil para iPhone y iPad, donde desactivo usuario hacer zoom con

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

esto funciona bien siempre y cuando el sitio está en modo horizontal. el ancho del sitio web es exactamente el ancho de la pantalla. luego, si giro el dispositivo al modo vertical, se reduce su escala para que se adapte al ancho nuevo (más corto). esto también está bien.

pero si lo giro de nuevo al modo horizontal, de repente se escala a aproximadamente 125%, lo que significa que ahora es posible el desplazamiento horizontal y no es posible hacer zoom desde que se inhabilitó inicialmente.

¿cómo puedo volver al 100% de zoom cuando se gira de nuevo al paisaje?

gracias!

Answer 1

experimentar con-escala máxima y mínima escala al igual que

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

y ver si se puede lograr lo que busca ..

Answer 2

Utilizando el maximum-scale y minimum-scale para detener el zoom Don' Realmente funciona porque le quita la capacidad al usuario para acercarse. Eso es realmente una mala idea, ya que hace que sus usuarios con malos ojos enojado de que su sitio web no zoom, mientras que otros sitios web hacen ...

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); 

eso es una soluc ion envuelto muy bien en un IIFE por lo que no tiene que preocuparse por cuestiones 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 ipads

Answer 3

Deshabilitar el zoom es una mala idea. No es una solución perfecta, pero si la escala del tamaño de la fuente del webkit en el cambio de orientación puede ayudar a minimizar el problema.Se podría dejar la cabeza del documento con:

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

allí tendría que hacer frente a la escala de fuentes de tamaño en el 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 */**