Cara membuat <div> persis mengisi jendela browser, termasuk Mobile Safari pada 2019

10

Saya sedang mengerjakan aplikasi web satu halaman, yang biasanya akan digunakan pada perangkat seluler. Salah satu fiturnya adalah mode peta, yang sementara mengambil alih seluruh jendela browser; skala jarak dan beberapa kontrol terpasang pada empat sudut peta. Berikut adalah screenshot kecil dari peta sehingga Anda dapat mengetahui apa yang saya bicarakan:

Peta diimplementasikan sebagai <div>dengan position: fixeddan keempat koordinat nol; Saya juga mengatur sementara <body>untuk overflow: hiddensementara peta terlihat untuk menangani kasus tampilan aplikasi yang mendasarinya digulir menjauh dari asal. Itu cukup untuk membuat peta berfungsi persis seperti yang saya inginkan di browser desktop. Peramban seluler juga mengharuskan saya memberikan tag meta viewport dengan sesuatu seperti "width=device-width,user-scalable=no"untuk membuat area jendela yang terlihat persis sama dengan viewport.

Ini semua bekerja dengan indah beberapa tahun yang lalu ketika saya awalnya menulis aplikasi ini, tetapi di suatu tempat sepanjang iOS Safari berhenti menghormati salah satu opsi meta viewport yang melibatkan penskalaan - tampaknya terlalu banyak situs yang salah menerapkan tag, menghasilkan teks yang sangat kecil, namun tidak nyaman. Saat ini, jika Anda mengaktifkan peta di peramban ini, Anda akan mendapatkan tampilan yang sedikit diperbesar, yang memotong tombol-tombol di kanan dan bawah - dan Anda tidak dapat melakukan apa-apa, karena semua sentuhan ditafsirkan sebagai gerakan zoom / pan untuk peta, daripada pengguliran browser. Peta tidak terlalu berguna tanpa fitur yang diakses melalui tombol-tombol itu - dan tanpa tombol kanan atas, Anda bahkan tidak bisa menutup peta. Satu-satunya jalan keluar adalah memuat ulang halaman, yang dapat menyebabkan hilangnya data yang belum disimpan.

Saya pasti akan menambahkan penggunaan history.pushState/ onpopstateagar overlay peta berperilaku seperti halaman terpisah. Anda bisa keluar dari mode peta menggunakan tombol Kembali browser - tetapi itu tidak mengatasi hilangnya fungsionalitas karena tombol yang hilang.

Saya telah mempertimbangkan menggunakan .requestFullscreen()untuk menerapkan hamparan peta, tetapi tidak didukung di mana-mana bahwa aplikasi akan dapat digunakan. Secara khusus, tampaknya tidak berfungsi sama sekali pada iPhone, dan pada iPad Anda mendapatkan bilah status dan tombol 'X' besar yang menumpangkan konten Anda - skala jarak saya kemungkinan tidak akan dapat dibaca lagi. Lagipula itu bukan apa yang sebenarnya saya inginkan - saya perlu jendela penuh , bukan layar penuh.

Bagaimana cara membuat tampilan jendela penuh bekerja pada browser modern? Semua informasi yang saya dapat temukan pada subjek berbicara tentang penggunaan tag meta viewport, tetapi seperti yang saya sebutkan tidak lagi berfungsi.

— jasonharper
sumber

1

@Joehat, sebagian besar aplikasi adalah responsif; bukan itu masalahnya. Hanya saja fitur hamparan peta ini yang memiliki masalah: gerakan sentuh digunakan untuk memperbesar / menggeser peta (ini adalah SVG, dihasilkan oleh d3.js), tidak meninggalkan cara untuk menyesuaikan zoom dan gulir browser. Ini berfungsi dengan baik ketika browser memungkinkan saya untuk mengontrol viewport.

— jasonharper

1

Beberapa pertanyaan mendasar: Apakah Anda menggunakan reset CSS? Apakah ada margin atau bantalan aneh pada sesuatu? Apakah tubuh diatur ke 100vw x 100vh? Apakah tubuh diposisikan relatif untuk div peta Anda untuk bekerja?

— itsallgoodie

1

bisa tolong bagikan kode sampel untuk ini .. saya akan memeriksa dan memberi tahu Anda

— Ranjith v

1

perlihatkan kode Anda !!

— nikhil sugandh

1

Tangkapan layar atau contoh konten yang dimasukkan ke jendela ini akan sangat membantu menentukan apa yang terjadi.

— Bryce Howitson

1

Larutan

Atur tinggi div layar penuh window.innerHeightdengan JavaScript dan kemudian perbarui ukuran jendela.

Masalah yang sama disini:

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

Info lebih lanjut:

— Maurici Abad
sumber

1

Anda perlu mengatur tinggi badan dan html menjadi 100%

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

— iicaptain
sumber

1

Sudahkah Anda mencoba ini?

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

— Rajilesh Panoli
sumber

(Saya menganggap Anda maksud vwpada lebar, bukan vh...) Elemen apa yang Anda sarankan agar saya tambahkan ini? Aku mencoba di beberapa tempat ( <html>, <body>, dan peta <div>), tapi melihat tidak ada perbedaan.

— jasonharper

Ini untuk div. Apakah ada skala transformasi atau properti pembesaran yang diterapkan pada elemen apa pun?

— Rajilesh Panoli

Tidak ada transformasi di tingkat HTML, zooming / panning peta saya dilakukan dengan menerapkan terjemahan ke elemen SVG yang menyusunnya.

— jasonharper

0

coba ini:

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

— nikhil sugandh
sumber

Ini tidak mengubah apa pun, dan saya tidak melihat alasan untuk mengharapkannya: shrink-to-fit=yesadalah default, dan Safari tidak lagi memperhatikan opsi penskalaan.

— jasonharper

0

Karena saya tidak dapat berkomentar, saya ingin menambahkan bahwa Anda harus memeriksa apakah tag tubuh Anda adalah ketinggian browser. Anda mungkin juga ingin memeriksa ini: Chrome / Safari tidak mengisi tinggi 100% induk fleksibel

— trigangle
sumber

0

Ini adalah solusi lama, dan mengatasi masalah yang terkait erat, tetapi tidak persis sama, jadi saya tidak yakin apakah itu berlaku: https://github.com/gajus/brim

Seharusnya solusi yang mirip dengan minimal-ui.

Inilah pertanyaan lain yang merujuk jawaban ini: iOS 8 menghapus properti viewport "minimal-ui", apakah ada solusi "soft fullscreen" lainnya?

Beri tahu saya jika ini membantu sama sekali.

— Sam Sabin
sumber

0

Coba kode berikut untuk div

.class{height:100vh;}

— Ata Ur Rehman
sumber

0

jika Anda menggunakan position: fixedcukup gunakan metode CSS standar yang telah ada selama bertahun-tahun.

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

Ini hanya akan membuat ukuran auto div ke ukuran penuh dari viewport, dan menggunakan kepemilikan tetap terkunci di tempatnya tidak peduli berapa banyak mereka menggulir, Anda dapat menonaktifkan body scroll jika Anda perlu dengan

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

jadi jika Anda hanya menambahkan kelas noScroll ke tag html itu akan menonaktifkan gulir. maka ketika Anda ingin mengizinkan pengguliran lagi Anda bisa.

— Barkermn01
sumber

0

Anda bisa menerapkan ini menggunakan struktur dua lapisan untuk kontrol peta Anda dan lapisan peta Anda. Artinya Anda sebenarnya tidak memerlukan apa pun javascriptuntuk mengimplementasikan apa yang Anda inginkan (walaupun tidak ada contoh pengkodean yang diberikan dalam pertanyaan). Anda dapat memanipulasi viewport dengan CSSdan itulah arti sebenarnya dari vwdan vhuntuk menjawab komentar Anda Bagaimana seharusnya 100vw / 100vh membantu? , dapat membantu karena vsingkatan viewport.

Lihat cuplikan misalnya.

Contoh yang lebih baik (lebih akurat pada parameter tertentu yang mungkin terlewatkan) dapat diberikan jika beberapa pengkodean hadir dalam pertanyaan.

PS: layer peta disimulasikan oleh gambar yang diperbesar dengan scroll.

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>

Luaskan cuplikan

— Peter Darmis
sumber