Jak sprawić, aby <div> dokładnie wypełniał okno przeglądarki, w tym Mobile Safari od 2019 r

10

Pracuję nad jednostronicową aplikacją internetową, która najczęściej będzie używana na urządzeniach mobilnych. Jedną z jego funkcji jest tryb mapy, który tymczasowo przejmuje całe okno przeglądarki; skalę odległości i niektóre elementy sterujące są dołączone do czterech rogów mapy. Oto mały zrzut ekranu mapy, dzięki czemu możesz powiedzieć, o czym mówię:

Mapa jest realizowany jako <div>ze position: fixedi wszystkie cztery współrzędne zero; Ja również tymczasowo ustawić <body>, aby overflow: hiddenpodczas gdy mapa jest widoczna obsłużyć przypadek podstawowej aplikacji wyświetlaczu są przewijane od pochodzenia. To wystarczy, aby mapa działała dokładnie tak, jak chcę w przeglądarkach komputerowych. Przeglądarki mobilne również wymagały podania metatagu znacznika okienka z czymś takim "width=device-width,user-scalable=no", aby widoczny obszar okna dokładnie odpowiadał rzutni.

Wszystko to działało pięknie kilka lat temu, kiedy pierwotnie napisałem tę aplikację, ale gdzieś po prostu iOS Safari przestał honorować dowolne opcje meta rzutni obejmujące skalowanie - najwyraźniej zbyt wiele witryn źle zastosowało znacznik, co spowodowało, że tekst był nieczytelnie mały, ale nie do zniesienia. Obecnie, jeśli włączysz mapę w tej przeglądarce, prawdopodobnie zobaczysz nieco powiększony widok, który odcina te przyciski po prawej iu dołu - i nic nie możesz na to poradzić, ponieważ wszystkie dotknięcia są interpretowane jako gesty powiększania / przesuwania mapy zamiast przewijania przeglądarki. Mapa nie jest zbyt przydatna bez funkcji dostępnych za pomocą tych przycisków - i bez prawego górnego przycisku nie można nawet zamknąć mapy. Jedynym wyjściem jest ponowne załadowanie strony, co może spowodować utratę niezapisanych danych.

Na pewno dodam użycie history.pushState/, onpopstateaby nakładka mapy zachowywała się jak osobna strona. Możesz wyjść z trybu mapy za pomocą przycisku Wstecz przeglądarki - ale to nie rozwiązuje problemu utraty funkcjonalności z powodu braku przycisków.

Zastanawiałem się nad .requestFullscreen()wdrożeniem nakładki mapy, ale nie wszędzie jest obsługiwane, że w przeciwnym razie aplikacja byłaby użyteczna. W szczególności najwyraźniej w ogóle nie działa na iPhone'ach, a na iPadzie dostajesz pasek stanu i ogromny przycisk „X” nakładający się na twoją treść - moja skala odległości prawdopodobnie już nie byłaby czytelna. W każdym razie nie jest to semantycznie to, czego naprawdę chcę - potrzebuję pełnego okna , a nie pełnego ekranu.

Jak uzyskać wyświetlanie w pełnym oknie w nowoczesnych przeglądarkach? Wszystkie informacje, które mogę znaleźć na ten temat, mówią o używaniu metatagu rzutni, ale jak już wspomniałem, to już nie działa.

— Jasonharper
źródło

1

@Joehat, większość aplikacji jest czuły; to nie jest problem. Problemem jest tylko funkcja nakładania mapy: gesty dotykowe służą do powiększania / przesuwania mapy (jest to plik SVG generowany przez d3.js), nie pozostawiając żadnego sposobu na dostosowanie powiększenia i przewijania przeglądarki. Działa to dobrze, gdy przeglądarka pozwala mi kontrolować rzutnię.

— jasonharper

1

Kilka podstawowych pytań: czy używasz resetowania CSS? Czy są jakieś dziwne marginesy lub wypełnienia? Czy w korpusie ustawiono wartość 100 vw x 100 vh? Czy ciało jest ustawione względnie do pracy z map div?

— itsallgoodie

1

czy możesz udostępnić przykładowy kod do tego ... sprawdzę i dam Ci znać

— Ranjith przeciwko

1

pokaż swój kod !!

— nikhil sugandh,

1

Zrzut ekranu lub inny przykład zawartości, która jest umieszczana w tym oknie, naprawdę pomoże ustalić, co się dzieje.

— Bryce Howitson,

1

Rozwiązanie

Ustaw wysokość div pełnego ekranu na window.innerHeightJavaScript, a następnie zaktualizuj go przy zmianie rozmiaru okna.

Mam ten sam problem:

https://stackoverflow.com/a/37113430/8662476

Więcej informacji:

— Maurici Abad
źródło

1

Musisz ustawić wysokość ciała i HTML na 100%

   html, body {
       width: 100%;
       height: 100%;
       margin: 0;
    }

— iicaptain
źródło

1

Próbowałeś tego?

width: 100vw;
height: 100vh;
margin: 0;
padding: 0;

— Rajilesh Panoli
źródło

(Zakładam, że miałeś vwna myśli szerokość, a nie vh...) Do jakiego elementu sugerujesz, żebym to dodał? Próbowałem w kilku miejscach ( <html>, <body>i na mapie <div>), ale nie zauważyłem żadnych różnic.

— jasonharper,

To jest dla div. Czy istnieje jakaś właściwość skali przekształcenia lub powiększenia zastosowana do dowolnego elementu.?

— Rajilesh Panoli,

Na poziomie HTML nie ma transformacji, powiększanie / przesuwanie mapy odbywa się poprzez zastosowanie tłumaczenia elementów SVG, które ją tworzą.

— jasonharper,

0

Spróbuj tego:

<meta name="viewport" content="width=device-width, height=device-height , 
initial-scale=1.0,user-scalable=no, shrink-to-fit=yes" />

— nikhil sugandh
źródło

To niczego nie zmieniło i nie widzę powodu, aby tego oczekiwać: shrink-to-fit=yesjest ustawieniem domyślnym, a Safari nie zwraca już uwagi na opcje skalowania.

— jasonharper,

0

Ponieważ nie mogę komentować, chciałbym dodać, że powinieneś sprawdzić, czy znacznik body ma wysokość przeglądarki. Możesz również to sprawdzić: Chrome / Safari nie wypełnia 100% wysokości flex rodzica

— trójkąt
źródło

0

To stare rozwiązanie, które rozwiązuje problem ściśle ze sobą powiązany, ale nie dokładnie taki sam, więc nie jestem pewien, czy dotyczy: https://github.com/gajus/brim

Ma to być rozwiązanie podobne do minimal-ui.

Oto kolejne pytanie, które odnosi się do tej odpowiedzi: iOS 8 usunął właściwość rzutni „minimal-ui”, czy istnieją inne rozwiązania „miękkiego pełnoekranowego”?

Daj mi znać, jeśli to w ogóle pomoże.

— Sam Sabin
źródło

0

Wypróbuj następujący kod dla div

.class{height:100vh;}

— Ata Ur Rehman
źródło

0

jeśli używasz, position: fixedpo prostu użyj standardowej metody CSS, która istnieje od wielu lat.

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

Spowoduje to po prostu automatyczne powiększenie div do pełnego rozmiaru rzutni, a używając opcji fix naprawiono, że jest zablokowany bez względu na to, jak dużo przewija, można wyłączyć przewijanie ciała, jeśli trzeba

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

więc jeśli dodasz klasę noScroll do tagu html, spowoduje to wyłączenie przewijania. wtedy, gdy chcesz ponownie zezwolić na przewijanie, możesz.

— Barkermn01
źródło

0

Możesz to zaimplementować, używając struktury dwuwarstwowej dla elementów sterujących mapy i warstwy mapy. Oznacza to, że tak naprawdę nie potrzebujesz żadnej javascriptimplementacji tego, co chcesz (chociaż w pytaniu nie podano żadnego przykładu kodowania). Można manipulować rzutnia ze CSSi to jest rzeczywisty sens vwi vhaby odpowiedzieć na komentarz Jak 100vw / 100vh niby jest pomoc? , może pomóc, ponieważ voznacza rzutnię.

Zobacz na przykład fragment kodu.

Lepszy przykład (dokładniejszy w odniesieniu do określonych parametrów, które mogą zostać pominięte) można podać, jeśli w pytaniu było obecne pewne kodowanie.

PS: warstwa mapy jest symulowana przez obraz powiększany podczas przewijania.

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>

Rozwiń fragment kodu

— Peter Darmis
źródło