contenuto overlay barra di controllo inferiore del browser Android

Question

Ho un elemento posizionato nella parte inferiore dello schermo che funziona perfettamente tranne il browser Android in cui la barra di controllo in basso si sovrappone al mio elemento. Non attiva nemmeno l'evento di ridimensionamento della finestra per provare e lavorare con quello. iOS Safari ha anche la barra di controllo inferiore, ma spinge il mio elemento correttamente e non lo sovrappone.

Sono aperto a qualsiasi suggerimento.

Answer 1

si può provare il nuovo display: fullscreen

https://developers.google.com/web/updates/2017/04/nic58#fullscreen

Quando Progressive Web Apps vengono lanciati dalla schermata iniziale di Android, lanciano in una modalità app-come stand-alone che nasconde l'omnibox. Ciò aiuta a creare un'esperienza utente coinvolgente e libera lo spazio dello schermo per i contenuti.

Tuttavia, per esperienze ancora più coinvolgenti come giochi, lettori video o altri contenuti multimediali, gli elementi dell'interfaccia utente mobile come le barre di sistema possono ancora essere una distrazione e occupare i pixel di valore che potresti desiderare.

Ora puoi rendere la tua app Web progressiva completamente immersiva impostando il display: fullscreen nel manifest web app.

Quando l'app viene avviata dalla schermata iniziale, tutti gli elementi dell'interfaccia utente mobile non app verranno nascosti.