Modifica posizione div su Zoom Mobile Safari

Question

Mi sto divertendo molto a conservare la posizione di una div relativa all'intero schermo quando un utente esegue lo zoom. In sostanza, quello che sto cercando di fare è ricollocare un div nella posizione calcolata correttamente facendolo apparire come se non si fosse mai mosso anche se l'utente potrebbe aver eseguito uno zoom. Questo sta rapidamente diventando molto complicato poiché fondamentalmente voglio annullare tutte le modifiche visive che sono state apportate dall'evento di zoom.

Ad esempio se la parte superiore del div è attualmente al centro dello schermo al livello di zoom 1, (ad esempio la scala di 1,00), quando l'utente passa al livello di zoom 2, (tramite un gesto di zoom pizzico, ad esempio scala di 1.235), vorrei riposizionare la parte superiore del div al centro dello schermo.

Attualmente, lego il contenitore genitore del div a una funzione che rileva gli eventi gesture.

vedere il link per la fonte.

Sarebbe gradita qualsiasi indicazione in merito. Grazie.

Aggiornamento: questo è un collegamento a un'applicazione di esempio. Puoi trovare tutti i miei attuali gestori e funzionalità. La mia preoccupazione principale è il reset dell'elemento "palmGuard" nella stessa posizione rispetto allo schermo, dopo uno zoom. Fatemi sapere se avete domande.

Link: http://restingrobot.com/test/testScale.html

Questo esempio funziona solo su Safari Mobile

Answer 1

Ok Credo che questo fa ciò che si vuole.

Invece di utilizzare un fattore di zoom è necessario calcolare la posizione del div in proporzione allo schermo iOS. Dovrai tenere traccia di tutto questo. Ogni volta che il div viene spostato (non zoom) e alla partenza è necessario per ottenere questo valore:

//When div moved and start 
var height = window.innerHeight; //Adjust if needed 
screenPos = (currentDivTop - window.pageYOffset)/height; 

Poi, quando lo zoom accade è necessario impostare la parte superiore del div sulla gestureEnd fino al punto superiore della pagina su schermo (es. window.pageYOffset) più i pixel del numero corrente sullo schermo (window.innerHeight) per la posizione relativa sullo schermo iOS calcolata in precedenza (screenPos). Questo ti dà una nuova posizione sullo schermo richiesto (non la differenza rispetto all'ultima volta).

//GestureEnd of zoom 
var height = window.innerHeight; //Adjust if needed 
var newDivTop = window.pageYOffset + (screenPos*height); 

Ricorda è necessario tenere traccia di questo valore percentuale.

Inoltre, penso che la logica per il "banding" dello zoom sia eccessivamente semplice, ovvero se questo è necessario per la gestione quando lo zoom rimbalza all'interno della gamma? Non penso che tenga conto delle diverse dimensioni dello schermo iOS.

Così come il "banding" che effettua l'innerHeight sembra anche influenzare il valore di posYOffset, che ha davvero un senso. Questo farà sì che il div sia posizionato più in basso nella pagina. Un modo per aggirare questo potrebbe essere quello di rilevare quando lo zoom è andato troppo lontano (il banding mentre ci si riferisce ad esso) e l'uso di una funzione di polling per rilevare quando innerHeight è tornato indietro al suo minimo, quindi ottenere posYOffset. Se esiste un evento dopo il banding, ovviamente non sarà richiesto il polling.

Si potrebbe essere in grado di calcolare la corretta parte superiore dello schermo (posYOffset) dal valore banding innerHeight, ma penso che potrebbe essere dipendente da dove sulla zoom le dita sono posto durante lo zoom.

Allo stesso modo il valore di posYOffset e innerHeight sembra cambiare dopo l'evento gestureEnd, quindi anche senza bande che si verificano è necessario un meccanismo per raccogliere il valore costante di pageYOffset e innerHeight. È possibile verificare questo effetto aggiungendo quanto segue a gestureEnd:

//In gestureEnd 
alert ('gestureEnd pageY:'+window.pageYOffset+' height:'+height); 
setTimeout(function() { 
       alert ('later pageY:'+window.pageYOffset+' height:'+window.innerHeight); 
         }, 
      2000); 

Answer 2

Bene Sarò onesto e dire che non ho ancora lavorato su applicazioni mobili/webstes. Quindi potrei non avere ragione su tutta la sintassi se differiscono dalla jquery tradizionale usata per i siti web. Ma puoi provare il seguente algoritmo (che sostanzialmente posiziona il div al centro della pagina dall'alto). Ho usato il jQuery tradizionale dal momento che mi è familiare.

/* ---- Excute the below lines on $(window).resize(function(){}); or a function that is triggered on zoom [which ever is correct] ---- */ 

var modalH = parseInt($('[THE DIV/ELEMENT THAT YOU WANT TO CENTER]').css('height')); 
var windowH = $(window).height(); 
var modalPosY = (windowH - modalH)/2; 
$('[THE DIV/ELEMENT THAT YOU WANT TO CENTER]').css('Top', modalPosY); 

e naturalmente la proprietà CSS dell'elemento div/deve essere assoluta [se non è già impostata]. E lo stesso può essere fatto per centrare lungo l'asse x (sostituendo altezza con larghezza)

O

Si potrebbe utilizzare valori percentuali per la posizione del div/elemento (che presumo opere migliori) . Il seguente articolo ti aiuterà su questo - http://novemberborn.net/2007/12/javascriptpage-zoom-ff3-128. (Controlla il caso di prova)