Prevenzione del ridimensionamento del viewport della pagina Web quando è attiva la tastiera virtuale Android

Question

Sto sviluppando un plug-in Javascript/JQuery per il responsive Web Design. Ha una funzione che monitora la vista per le modifiche, in particolare il ridimensionamento e l'orientamento. Quando viene rilevata una modifica, viene richiamata una funzione di richiamata corrispondente.

Tuttavia, ho appena notato che su Android (in particolare utilizzando il browser di serie su un Google Galaxy Nexus), se l'utente tenta di utilizzare la tastiera virtuale, ridimensiona il viewport, attivando così la funzione di callback. Questo è un comportamento che vorrei eliminare.

C'è un modo per - tramite Javascript - disabilitare questo comportamento o rilevare per questo in modo da poter apportare modifiche al codice di base per adattarlo ?!

Le soluzioni che ho visto finora devono fare principalmente con lo sviluppo di app Android e non sono sicuro che si applicano nel mio caso.

Grazie.

Answer 1

Ok, beh, dopo un po 'di manovre ho scoperto una soluzione al mio problema.

Quindi cosa succede quando la tastiera virtuale viene visualizzata/nascosta ?! Nel mio test, lo viewport width rimane costante. Tuttavia, viewport height modifica la dimensione [((current - previous)/previous)*100] quando la tastiera software viene visualizzata da 43% (in verticale) e da 58% (in orizzontale); e quando la tastiera virtuale è nascosta da 73% (in verticale) e 139% (in orizzontale) rispettivamente.

Quindi quello che ho fatto è stato disattivare la funzione di callback quando le seguenti condizioni sono tutte vere:

1. Il dispositivo è mobile
2. La variazione percentuale in larghezza viewport è inferiore all'1%
3. La percentuale il cambio di altezza della vista è superiore al 35%

Poiché i browser dei dispositivi mobili non hanno maniglie di ridimensionamento come sul desktop, non credo che si verificherà una situazione su dove un utente imiterà le condizioni di cui sopra in modo naturale.

È possibile visualizzare un esempio del codice qui: https://github.com/obihill/restive.js/blob/master/restive.js#L4403. Sfortunatamente, fa parte di un set di codici più grande, ma dovresti essere in grado di raccogliere l'idea di base basata sui condizionali.

Cheers.

Answer 2

Ho avuto un problema simile. E la mia soluzione era quella di utilizzare l'evento di modifica dell'orientamento anziché l'evento resize, che si innesca quando meno te lo aspetti su Android: P

$(window).bind('orientationchange', function(e){ // Type pretty code here }); 

fonte: http://www.andreasnorman.com/dealing-androids-constant-browser-resizing/