So erstellen Sie ein <div> genaues Ausfüllen des Browserfensters, einschließlich Mobile Safari ab 2019

10

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:

Screenshot der Kartenüberlagerung

Die Karte wird als <div>mit position: fixedund alle vier Koordinaten Null implementiert ; Ich habe auch vorübergehend den Wert auf gesetzt <body>, overflow: hiddenwä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, onpopstatedamit 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.

html  css  mobile-safari  fullscreen 
— jasonharper
quelle
1
@Joehat, der Großteil der app ist anspricht; das ist nicht das problem Es ist nur diese Kartenüberlagerungsfunktion, die ein Problem aufweist: Berührungsgesten werden zum Zoomen / Schwenken der Karte verwendet (es handelt sich um eine von d3.js generierte SVG-Datei), sodass der Zoom und das Scrollen des Browsers nicht angepasst werden können. Es hat gut funktioniert, als der Browser mir erlaubte, das Ansichtsfenster zu steuern.
— Jasonharper
1
Einige grundlegende Fragen: Verwenden Sie einen CSS-Reset? Gibt es irgendwelche seltsamen Ränder oder Polster auf irgendetwas? Ist der Körper auf 100vw x 100vh eingestellt? Ist der Körper relativ positioniert, damit Ihr Map Div arbeiten kann?
— itsallgoodie
1
Können Sie bitte Beispielcode für diese teilen .. Ich werde überprüfen und Sie wissen lassen
— Ranjith v
1
zeige deinen Code !!
— Nikil Sugandh
1
Ein Screenshot oder ein Beispiel für den Inhalt, der in dieses Fenster gestellt wird, würde wirklich helfen, festzustellen, was los ist.
— Bryce Howitson

Antworten:

1

Sie müssen die Höhe von body und html auf 100% einstellen

   html, body {
       width: 100%;
       height: 100%;
       margin: 0;
    }
— iicaptain
quelle
1

Hast du diese ausprobiert?

width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
— Rajilesh Panoli
quelle
(Ich nehme an, Sie meinten vwdie Breite, nicht vh...) 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 .
— Jasonharper
Es ist für die div. Gibt es eine Transformationsskala oder eine Zoomeigenschaft, die auf ein Element angewendet wird?
— Rajilesh Panoli
Auf HTML-Ebene gibt es keine Transformationen. Das Zoomen / Schwenken meiner Karte erfolgt durch Anwenden von Übersetzungen auf die SVG-Elemente, aus denen sie besteht.
— Jasonharper
0

Versuche dies:

<meta name="viewport" content="width=device-width, height=device-height , 
initial-scale=1.0,user-scalable=no, shrink-to-fit=yes" />
— Nikil Sugandh
quelle
Das hat nichts geändert, und ich sehe keinen Grund, dies zu erwarten: shrink-to-fit=yes ist die Standardeinstellung, und Safari achtet nicht mehr auf die Skalierungsoptionen.
— Jasonharper
0

Wenn Sie position: fixednur die Standard-CSS-Methode verwenden, die es schon seit vielen Jahren gibt.

.divFixedClass{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

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 

html.noScroll, html.noScroll > body{
    overflow:none;
}

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.

— Barkermn01
quelle
0

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 von vwund vhum Ihren Kommentar zu beantworten. Wie soll 100vw / 100vh helfen? kann es helfen, da vfür viewport steht.

Siehe zum Beispiel das Snippet.

Ein besseres Beispiel (genauer für bestimmte Parameter, die möglicherweise übersehen werden) könnte angegeben werden, wenn in der Frage eine Codierung vorhanden wäre.

PS: Die Kartenebene wird durch ein Bild simuliert, das beim Scrollen gezoomt wird.

function zoom(event) {
  event.preventDefault();

  scale += event.deltaY * -0.01;

  // Restrict scale
  scale = Math.min(Math.max(.125, scale), 4);
  if (scale < 1) {
    scale = 1;
  }
  // Apply scale transform
  el.style.transform = `scale(${scale})`;
}
let scale = 1;
const el = document.getElementById('map');
el.onwheel = zoom;
.container {
  position: absolute;
   display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
}

#map {
  width: 100vw;
  height: 100vh;
    background-repeat: no-repeat;
  background-position: center center;
  background-image: url(https://picsum.photos/800/500.webp);
  z-index: 1;
}


#main {
  display: grid;
  position: absolute;
  background-color: transparent;
  top: 0;
  left: 0;
  grid-template-columns: 6rem auto 6rem;
  grid-template-rows: 3rem auto 3rem;
  width: 0;
  height: 0;
 z-index: 2;
}

.t-l {
background: #fc0;
  position: fixed;
  z-index: 2;
  color: #000;
  top; 0;
  left: 0;
  width: 6rem;
  height: 3rem;
  display: block;
  grid-column-start: 1;
  grid-column-end: column1-end;
  grid-row-start: 1;
  grid-row-end: row1-end;
}
.t-r {
background: #0cf;
  position: fixed;
  z-index: 2;
  color: #000;
  top; 0;
  left: calc(100vw-6rem);
  right: 0;
  width: 6rem;
  height: 3rem;
  display: block;
  grid-column-start: 3;
  grid-column-end: column3-end;
  grid-row-start: 1;
  grid-row-end: row1-end;
}
.b-l {
background: #c0f;
  position: fixed;
  z-index: 2;
  color: #000;
  bottom: 0;
  top: calc(100vh-3rem);
  left: 0;
  width: 6rem;
  height: 3rem;
  display: block;
  grid-column-start: 1;
  grid-column-end: column1-end;
  grid-row-start: 3;
  grid-row-end: row3-end;
}
.b-r {
background: #cf0;
  position: fixed;
  z-index: 2;
  color: #000;
  top: calc(100vh-3rem);
  left: 100vw;
  margin-left: -6rem;
  bottom: 0;
  width: 6rem;
  height: 3rem;
  display: block;
  grid-column-start: 3;
  grid-column-end: column3-end;
  grid-row-start: 3;
  grid-row-end: row3-end;
}
<div class="container">

  <div id="main">
    <button class="t-l">top left control</button>
    <button class="t-r">top right control</button>
    <button class="b-l">bottom left control</button>
    <button class="b-r">bottom right control</button>
  </div>
<div id="map"></div>
</div>
Erweitern Sie das Snippet

— Peter Darmis
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.