html - rotacion - no se gira la pantalla de mi iphone

El diseño del iPad se amplía al girar de vertical a horizontal (11)

He agregado una metaetiqueta de "viewport" gráfica "width=device-width,initial-scale=1.0" y en un iPad la página se carga bien en modo horizontal, cambia muy bien a vertical y cuando la giro de nuevo a paisaje escala la página y tengo que pellizcarlo para volver a una escala de 1.

Puedo solucionar esto agregando la "maximum-scale=1.0, user-scalable=no" , pero me preguntaba si hay alguna manera de solucionarlo sin quitarle al usuario la capacidad de acercar la página.

Si tienes alguna sugerencia, me encantaría escucharlos,
¡Gracias!

------ Actualización ------

Esto ya no es un problema en iOS7. Y hay una mejor solución de Scott Jehl en github scottjehl/iOS-Orientationchange-Fix que funciona para iOS6.

------ Respuesta original ------

Jeremy Keith ( @adactio ) tiene una buena solución para esto en su blog Orientación y escala

Mantenga el marcado escalable

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

A continuación, deshabilite la escalabilidad con javascript hasta que gesturestart con este script:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) { var viewportmeta = document.querySelector(''meta[name="viewport"]''); if (viewportmeta) { viewportmeta.content = ''width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0''; document.body.addEventListener(''gesturestart'', function () { viewportmeta.content = ''width=device-width, minimum-scale=0.25, maximum-scale=1.6''; }, false); } }

Con suerte, esto ayudará ...

Cuando dices que escala la página hacia arriba, ¿son todos los elementos, o solo el tamaño de la fuente del texto? ... Para arreglar el tamaño de la fuente, puedes usar:

html {-webkit-text-size-adjust: 100%; }

Esto parece ser un error en iOS 4 que puede remediarse con el siguiente fragmento de Javascript, sin embargo, desactiva la capacidad del usuario de hacer pellizcar para acercar:

https://gist.github.com/901295/229d163414e22ebb14a6a6ba0b9777118f02e52d

La primera solución funcionó para mí con los siguientes cambios.

Cambie la escala inicial a .8, mínimo a .25 y máximo a 1.6.

Usa la etiqueta "meta"

La solución utilizada por jQuery mobile está aquí

scottjehl/iOS-Orientationchange-Fix

Minificado

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

Fuente completa

/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto. MIT / GPLv2 License. */ (function(w){ // This fix addresses an iOS bug, so return early if the UA claims it''s something else. var ua = navigator.userAgent; if( !( /iPhone|iPad|iPod/.test( navigator.platform ) && /OS [1-5]_[0-9_]* like Mac OS X/i.test(ua) && ua.indexOf( "AppleWebKit" ) > -1 ) ){ return; } var doc = w.document; if( !doc.querySelector ){ return; } var meta = doc.querySelector( "meta[name=viewport]" ), initialContent = meta && meta.getAttribute( "content" ), disabledZoom = initialContent + ",maximum-scale=1", enabledZoom = initialContent + ",maximum-scale=10", enabled = true, x, y, z, aig; if( !meta ){ return; } function restoreZoom(){ meta.setAttribute( "content", enabledZoom ); enabled = true; } function disableZoom(){ meta.setAttribute( "content", disabledZoom ); enabled = false; } function checkTilt( e ){ aig = e.accelerationIncludingGravity; x = Math.abs( aig.x ); y = Math.abs( aig.y ); z = Math.abs( aig.z ); // If portrait orientation and in one of the danger zones if( (!w.orientation || w.orientation === 180) && ( x > 7 || ( ( z > 6 && y < 8 || z < 8 && y > 6 ) && x > 5 ) ) ){ if( enabled ){ disableZoom(); } } else if( !enabled ){ restoreZoom(); } } w.addEventListener( "orientationchange", restoreZoom, false ); w.addEventListener( "devicemotion", checkTilt, false ); })( this );

Para que la secuencia de comandos funcione y eludir el 2.º gesto retoque menor como en el evento de cambio de orientación, establezca el máximo en 1.00099 en lugar de solo 1.0

Se me ocurrió una solución diferente para mantener el zoom en 1 en rotación, pero permitir al usuario pellizcar para hacer zoom. Básicamente, cuando el usuario amplía, javascript cambia el nivel de zoom de la ventana gráfica (y la funcionalidad de zoom nativo del navegador está deshabilitada).

Véalo aquí: https://.com/a/11878932/436776

meta:

%meta{content: "width=device-width, initial-scale=1.0, minimum-scale=0.25, maximum-scale=1.6, user-scalable=yes", name: "viewport"}

al guión global:

if navigator.platform.toLowerCase() is "ipad" viewport = $ "meta[name=''viewport'']" viewport_content = viewport.attr("content") # reset initial zoom viewport.attr "content", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes" setTimeout => viewport.attr "content", viewport_content , 0 # reset zoom on rotate timeout = null window.onorientationchange = -> clearTimeout timeout if timeout? viewport.attr "content", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes" timeout = setTimeout => viewport.attr "content", viewport_content , 1000

Scott Jehl propuso una solución fantástica que utiliza el acelerómetro para anticipar los cambios de orientación. Esta solución es muy sensible y no interfiere con los gestos de zoom.

scottjehl/iOS-Orientationchange-Fix

Cómo funciona: esta solución funciona escuchando el acelerómetro del dispositivo para predecir cuándo va a ocurrir un cambio de orientación. Cuando considera que una orientación cambia inminente, la secuencia de comandos desactiva el zoom del usuario, permitiendo que el cambio de orientación ocurra correctamente, con el zoom desactivado. La secuencia de comandos restaura el zoom una vez que el dispositivo está orientado cerca de la posición vertical o después de que su orientación ha cambiado. De esta forma, el zoom del usuario nunca se deshabilita mientras la página está en uso.

Fuente minificada:

/*! 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);

¡Este funciona!