Je travaille sur une application Web d'une seule page, qui sera généralement utilisée sur les appareils mobiles. L'une de ses fonctionnalités est un mode carte, qui occupe temporairement l'intégralité de la fenêtre du navigateur; une échelle de distance et certains contrôles sont attachés aux quatre coins de la carte. Voici une petite capture d'écran de la carte pour que vous puissiez dire de quoi je parle:
La carte est implémentée comme un <div>avec position: fixedet les quatre coordonnées zéro; Je mets aussi temporairement le <body>pour overflow: hiddenalors que la carte est visible pour traiter le cas de l'affichage de l' application sous - jacente étant loin de l'défiler origine. Cela suffit pour que la carte fonctionne exactement comme je le souhaite sur les navigateurs de bureau. Les navigateurs mobiles exigeaient également que je donne une balise meta viewport avec quelque chose comme"width=device-width,user-scalable=no" pour que la zone visible de la fenêtre corresponde exactement à la fenêtre.
Tout cela a fonctionné à merveille a quelques années lorsque j'ai écrit cette application à l'origine, mais quelque part le long de la ligne, iOS Safari a cessé d'honorer toutes les options de méta-fenêtre impliquant la mise à l'échelle - apparemment, trop de sites ont mal appliqué la balise, ce qui a donné du texte qui était infiniment petit, mais pas zoomable. Actuellement, si vous activez la carte sur ce navigateur, vous obtiendrez probablement une vue légèrement agrandie, qui coupe ces boutons à droite et en bas - et vous ne pouvez rien y faire , car toutes les touches sont interprétées comme des gestes de zoom / panoramique pour la carte, plutôt que de défilement du navigateur. La carte n'est pas terriblement utile sans les fonctionnalités accessibles via ces boutons - et sans le bouton en haut à droite, vous ne pouvez même pas fermer la carte. La seule solution consiste à recharger la page, ce qui peut entraîner la perte de données non enregistrées.
Je vais certainement ajouter l'utilisation de history.pushState/ onpopstatepour que la superposition de carte se comporte comme une page distincte. Vous seriez en mesure de sortir du mode carte en utilisant le bouton Précédent du navigateur - mais cela ne résout pas le reste de la perte de fonctionnalité due à des boutons manquants.
J'ai envisagé d'utiliser .requestFullscreen()pour implémenter la superposition de carte, mais il n'est pas pris en charge partout où l'application serait autrement utilisable. En particulier, cela ne fonctionne apparemment pas du tout sur les iPhones, et sur les iPad, vous obtenez une barre d'état et un énorme bouton `` X '' superposant votre contenu - mon échelle de distance ne serait probablement plus lisible. Ce n'est pas sémantiquement ce que je veux vraiment, de toute façon - j'ai besoin de la fenêtre complète , pas du plein écran.
Comment obtenir un affichage plein écran sur des navigateurs modernes? Toutes les informations que je peux trouver sur le sujet parlent de l'utilisation de la balise meta viewport, mais comme je l'ai mentionné, cela ne fonctionne plus.