Ich arbeite an einer einseitigen Web-App, die normalerweise auf Mobilgeräten verwendet wird. Eine seiner Funktionen ist ein Kartenmodus, der vorübergehend das gesamte Browserfenster übernimmt. An den vier Ecken der Karte sind eine Entfernungsskala und einige Steuerelemente angebracht. Hier ist ein kleiner Screenshot der Karte, damit Sie sehen können, wovon ich spreche:
Die Karte wird als <div>
mit position: fixed
und alle vier Koordinaten Null implementiert ; Ich habe auch vorübergehend den Wert auf gesetzt <body>
, overflow: hidden
während die Karte sichtbar ist, um den Fall zu behandeln, dass die zugrunde liegende App-Anzeige vom Ursprung weg gescrollt wird. Dies reicht aus, damit die Karte in Desktop-Browsern genau so funktioniert, wie ich es möchte. Für mobile Browser war es auch erforderlich, dass ich ein Meta-Ansichtsfenster-Tag mit so etwas wie gebe "width=device-width,user-scalable=no"
, damit der sichtbare Bereich des Fensters genau dem Ansichtsfenster entspricht.
Dies alles hat vor ein paar Jahren wunderbar funktioniert, als ich diese App ursprünglich geschrieben habe, aber irgendwann hat iOS Safari aufgehört, die Meta-Ansichtsfenster-Optionen für die Skalierung zu berücksichtigen - anscheinend haben zu viele Websites das Tag falsch angewendet, was zu unlesbar kleinem Text führte. noch nicht zoombar. Wenn Sie die Karte in diesem Browser aktivieren, erhalten Sie derzeit wahrscheinlich eine leicht vergrößerte Ansicht, die diese Schaltflächen rechts und unten abschneidet - und Sie können nichts dagegen tun, da alle Berührungen als Zoom- / Schwenkgesten für die Karte interpretiert werden und nicht als Scrollen im Browser. Die Karte ist ohne die Funktionen, auf die über diese Schaltflächen zugegriffen wird, nicht besonders nützlich. Ohne die Schaltfläche oben rechts können Sie die Karte nicht einmal schließen. Der einzige Ausweg besteht darin, die Seite neu zu laden, was zum Verlust nicht gespeicherter Daten führen kann.
Ich werde definitiv die Verwendung von history.pushState
/ hinzufügen, onpopstate
damit sich das Karten-Overlay wie eine separate Seite verhält. Sie können den Kartenmodus mit der Schaltfläche "Zurück" des Browsers verlassen. Dies behebt jedoch nicht den Rest des Funktionsverlusts aufgrund fehlender Schaltflächen.
Ich habe überlegt .requestFullscreen()
, das Karten-Overlay zu implementieren, aber es wird nicht überall unterstützt, dass die App sonst verwendet werden kann. Insbesondere funktioniert es auf iPhones anscheinend überhaupt nicht, und auf iPads erhalten Sie eine Statusleiste und eine riesige X-Taste, die Ihren Inhalt überlagert - meine Entfernungsskala wäre wahrscheinlich nicht mehr lesbar. Es ist sowieso nicht semantisch das, was ich wirklich will - ich brauche das volle Fenster , nicht den ganzen Bildschirm.
Wie kann ich ein Vollfenster-Display in modernen Browsern verwenden? Alle Informationen, die ich zu diesem Thema finden kann, beziehen sich auf die Verwendung des Meta-Ansichtsfenster-Tags, aber wie bereits erwähnt, funktioniert dies nicht mehr.
quelle
Antworten:
Lösung
Stellen Sie die Höhe des Vollbild-Divs
window.innerHeight
mit JavaScript auf ein und aktualisieren Sie sie dann bei Fenstergrößenänderung.Selbes Problem hier:
https://stackoverflow.com/a/37113430/8662476
Mehr Info:
quelle
Sie müssen die Höhe von body und html auf 100% einstellen
quelle
Hast du diese ausprobiert?
quelle
vw
die Breite, nichtvh
...) Zu welchem Element schlagen Sie vor, dass ich dies hinzufüge? Ich habe es an mehreren Stellen (<html>
,,<body>
und auf der Karte<div>
) versucht, aber keine Unterschiede festgestellt .Versuche dies:
quelle
shrink-to-fit=yes
ist die Standardeinstellung, und Safari achtet nicht mehr auf die Skalierungsoptionen.Da ich keinen Kommentar abgeben kann, möchte ich hinzufügen, dass Sie überprüfen sollten, ob Ihr Body-Tag die Höhe des Browsers hat. Möglicherweise möchten Sie auch Folgendes überprüfen: Chrome / Safari füllt nicht 100% der Höhe des Flex-Elternteils aus
quelle
Dies ist eine alte Lösung und behebt ein Problem, das eng miteinander verbunden ist, aber nicht genau dasselbe. Daher bin ich mir nicht sicher, ob es zutrifft: https://github.com/gajus/brim
Es soll eine Lösung sein, die minimal-ui ähnelt.
Hier ist eine weitere Frage, die auf diese Antwort verweist: iOS 8 hat die Ansichtsfenster-Eigenschaft "minimal-ui" entfernt. Gibt es andere "weiche Vollbild" -Lösungen?
Lassen Sie mich wissen, ob dies überhaupt hilft.
quelle
Versuchen Sie den folgenden Code für div
quelle
Wenn Sie
position: fixed
nur die Standard-CSS-Methode verwenden, die es schon seit vielen Jahren gibt.Dadurch wird die automatische Größe des div auf die volle Größe des Ansichtsfensters eingestellt, und wenn die Besitztümer behoben sind, ist sie an Ort und Stelle verriegelt, unabhängig davon, wie viel sie scrollen. Sie können den Bildlauf bei Bedarf deaktivieren
Wenn Sie also nur die noScroll-Klasse zum HTML-Tag hinzufügen, wird das Scrollen deaktiviert. Wenn Sie dann das Scrollen wieder zulassen möchten, können Sie dies tun.
quelle
Sie können dies mithilfe einer Zwei-Ebenen-Struktur für Ihre Kartensteuerelemente und Ihre Kartenebene implementieren. Dies bedeutet, dass Sie tatsächlich keine benötigen
javascript
, um das zu implementieren, was Sie möchten (obwohl in der Frage kein Codierungsbeispiel angegeben wurde). Sie können das Ansichtsfenster mit bearbeitenCSS
und das ist die eigentliche Bedeutung vonvw
undvh
um Ihren Kommentar zu beantworten. Wie soll 100vw / 100vh helfen? kann es helfen, dav
für viewport steht.Siehe zum Beispiel das Snippet.
PS: Die Kartenebene wird durch ein Bild simuliert, das beim Scrollen gezoomt wird.
quelle