Come posso ripristinare lo zoom dopo l'invio del modulo in Safari mobile, mantenendo in seguito la scalabilità dell'utente?

Question

Quando un utente accede alla mia app da un iPhone/iPad, Safari (utilmente) effettua lo zoom mentre l'utente sta compilando i campi nome utente/password. Ma quando il modulo viene inviato e noi li accediamo, non ricarichiamo la pagina (questa è un'applicazione a singola pagina), quindi lo zoom non viene mai ripristinato. Quindi l'app viene sempre avviata con una scala ingrandita.

Ho visto Jeremy Keith's solution, che ripristina correttamente lo zoom, ma impedisce anche il ridimensionamento/zoom futuro da parte dell'utente, perché imposta maximum-scale del viewport.

Ti piace questa:

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'; 
} 

qualcuno ha visto una bella soluzione per resettare questo dopo un invio di un modulo, senza congelare la finestra dopo?

Answer 1

Quello che ho trovato funziona è un po 'hacky, ma sembra efficace. Fondamentalmente, sull'invio del modulo, sto impostando il maximum-scale, e quindi immediatamente rimuovendolo. Spero che questo aiuti qualcuno.

element.on('submit', function(event) { 
    if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) { 
     var viewportmeta = document.querySelector('meta[name="viewport"]'); 
     if (viewportmeta) { 
     viewportmeta.setAttribute('content', 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0'); 
     viewportmeta.setAttribute('content', 'width=device-width, minimum-scale=1.0, initial-scale=1.0'); 
     } 
    } 
}