La disposizione dell’iPad si ridimensiona quando si ruota da verticale a orizzontale

Ho aggiunto al meta tag "viewport" "width=device-width,initial-scale=1.0" e su un iPad la pagina si carica bene in modalità landscape, passa a portrait e quando la ruoto di nuovo orizzontale ridimensiona la pagina e devo pizzicarla per ridurla a una scala 1.

Posso risolvere questo problema aggiungendo "maximum-scale=1.0, user-scalable=no" , ma mi chiedevo se c’è un modo per risolvere questo problema senza togliere all’utente la possibilità di ingrandire la pagina.

Se hai qualche suggerimento mi piacerebbe ascoltarli,
Grazie!

—— Aggiornare ——

Questo non è più un problema in iOS7. E c’è una soluzione migliore di Scott Jehl su github scottjehl / iOS-Orientationchange-Fix che funziona per iOS6.

—— Risposta originale ——

Jeremy Keith ( @adactio ) ha una buona soluzione per questo nel suo blog Orientamento e scala

Mantieni il markup scalabile

  

Quindi disabilita la scalabilità con javascript fino a gesticestart con questo 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); } } 

Scott Jehl ha trovato una soluzione fantastica che utilizza l’accelerometro per anticipare i cambiamenti di orientamento. Questa soluzione è molto retriggers e non interferisce con i movimenti dello zoom.

https://github.com/scottjehl/iOS-Orientationchange-Fix

Come funziona: questa correzione funziona ascoltando l’accelerometro del dispositivo per prevedere quando si verificherà un cambiamento di orientamento. Quando ritiene imminente un cambio di orientamento, lo script disabilita lo zoom dell’utente, consentendo il corretto cambio dell’orientamento, con lo zoom disabilitato. Lo script ripristina lo zoom una volta che il dispositivo è orientato vicino al montante o dopo che il suo orientamento è cambiato. In questo modo, lo zoom dell’utente non viene mai disabilitato mentre la pagina è in uso.

Fonte miniata:

 /*! 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(cx);i=Math.abs(cy);h=Math.abs(cz);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); 

Speriamo che questo aiuti …

    

La correzione utilizzata da jQuery Mobile è qui

https://github.com/scottjehl/iOS-Orientationchange-Fix

minified

 /*! 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(lx), j = Math.abs(ly), k = Math.abs(lz), (!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); 

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

Questo sembra essere un bug in iOS 4 che può essere risolto con il seguente snippet di Javascript, tuttavia disabilita la capacità dell’utente di eseguire il pinch-to-zoom:

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

Questo funziona!

   

Per fare in modo che la sceneggiatura funzioni e bypassare il secondo gesto, come nel caso dell’aggiustamento di modifica dell’orientamento, imposta il valore massimo su 1.00099 anziché solo su 1.0

Quando dici che ridimensiona la pagina, è che tutti gli elementi, o solo la dimensione del carattere del testo? … Per correggere la dimensione del carattere puoi usare:

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

Ho trovato una soluzione diversa per mantenere lo zoom su 1 in rotazione, ma consentire all’utente di pizzicare su zoom. Fondamentalmente quando l’utente zooma, javascript modifica il livello di zoom del viewport (e la funzionalità di zoom del browser nativo è disabilitata).

Guardalo qui: https://stackoverflow.com/a/11878932/436776

La prima correzione ha funzionato per me con le seguenti modifiche.

Cambia la scala iniziale in .8, minima in 0,25 e massima in 1,6.

Utilizza il tag “meta”

   

per meta:

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

allo script globale:

 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