Sto lavorando su un'app Web a pagina singola, che in genere verrà utilizzata su dispositivi mobili. Una delle sue caratteristiche è una modalità mappa, che occupa temporaneamente l'intera finestra del browser; una scala della distanza e alcuni controlli sono collegati ai quattro angoli della mappa. Ecco un piccolo screenshot della mappa in modo da poter dire di cosa sto parlando:
La mappa è implementata come <div>
con position: fixed
zero e tutte e quattro le coordinate zero; Ho anche impostato temporaneamente <body>
a overflow: hidden
mentre la mappa è visibile per gestire il caso della visualizzazione dell'app sottostante che scorre via dall'origine. È sufficiente per far funzionare la mappa esattamente come voglio sui browser desktop. I browser mobili hanno anche richiesto che io fornissi un tag meta viewport con qualcosa del genere "width=device-width,user-scalable=no"
per rendere esattamente l'area visibile della finestra esattamente corrispondente al viewport.
Tutto questo ha funzionato magnificamente qualche anno fa quando ho scritto questa app, ma da qualche parte lungo la linea iOS Safari ha smesso di onorare una qualsiasi delle opzioni di meta viewport che coinvolgono il ridimensionamento: a quanto pare troppi siti stavano applicando erroneamente il tag, risultando in un testo illeggibilmente piccolo, ma nonzoomabile. Al momento, se abiliti la mappa su questo browser, è probabile che tu abbia una vista leggermente ingrandita, che interrompe quei pulsanti a destra e in basso e non puoi farci nulla, poiché tutti i tocchi vengono interpretati come gesti di zoom / panoramica per la mappa, anziché come scorrimento del browser. La mappa non è terribilmente utile senza le funzionalità accessibili tramite quei pulsanti e senza il pulsante in alto a destra, non puoi nemmeno chiudere la mappa. L'unica via d'uscita è ricaricare la pagina, il che può comportare la perdita di dati non salvati.
Aggiungerò sicuramente l'uso di history.pushState
/ in onpopstate
modo che l'overlay della mappa si comporti come una pagina separata. Saresti in grado di uscire dalla modalità mappa utilizzando il pulsante Indietro del browser, ma ciò non risolve il resto della perdita della funzionalità a causa della mancanza di pulsanti.
Ho pensato di utilizzare .requestFullscreen()
per implementare l'overlay della mappa, ma non è supportato ovunque che l'app sarebbe altrimenti utilizzabile. In particolare, a quanto pare non funziona affatto su iPhone e su iPad ottieni una barra di stato e un enorme pulsante 'X' che sovrappone i tuoi contenuti - la mia scala di distanza probabilmente non sarebbe più leggibile. Non è semanticamente quello che voglio davvero, comunque - ho bisogno della finestra intera , non dello schermo intero.
Come faccio a far funzionare una visualizzazione a finestra intera sui browser moderni? Tutte le informazioni che posso trovare sull'argomento parlano dell'uso del tag meta viewport, ma come ho già detto, non funziona più.