I browser mobili non attivano l'evento di ridimensionamento quando si nasconde la barra degli indirizzi

Question

Ho due sezioni sul mio sito Web, la cui altezza è impostata su window.innerHeight. Quando viene attivato l'evento di ridimensionamento, l'altezza viene aggiornata.

Questo funziona perfettamente sul mio desktop, ma sul mio telefono Android ho alcuni problemi.

In Chrome per Android, se si scorre verso il basso in modo che la barra degli indirizzi venga nascosta e le dimensioni della finestra cambino, Chrome attiva un evento di ridimensionamento e l'altezza viene aggiornata.

Firefox e il browser Android predefinito non attivano questo evento di ridimensionamento dopo aver nascosto la barra degli indirizzi. Se cambio manualmente l'orientamento del dispositivo da verticale a orizzontale e viceversa, l'altezza viene aggiornata come dovrebbe.

Così ho provato a inviare un evento orientationchange da solo, ma questo non ha funzionato.

C'è un modo per far sì che Firefox e il browser predefinito si comportino come Chrome?

Ecco lo website.

Answer 1

browser Infatti mobili (testato Android/Chrome iOs/Safari), quando commutazione barra degli indirizzi, genera l'evento resize solo dopo che l'utente prende dito dallo schermo.

Tuttavia, è possibile utilizzare l'evento touchmove, che ha reso il browser nascosto o mostra la barra degli indirizzi in primo luogo. Nel gestore possiamo usare la proprietà window.innerHeight per rilevare le modifiche nell'altezza del viewport. Utilizzando jQuery:

$(window).on('resize touchmove', function() { 
    // adjust heights basing on window.innerHeight 
    // $(window).height() will not return correct value before resizing is done 
}); 

Non è perfetto, ma comunque è l'unica soluzione di lavoro mi è venuta.

L'intero comportamento è un po 'strano, perché anche gli elementi in stile con position: fixed verranno ridisegnati solo dopo che il tocco è terminato.

Inoltre, se la funzione di regolazione causa un ritardo, è probabile che l'handler venga rimbalzato.