Tajuk ditulis semula sebagai: Nilai 100vh CSS3 tidak tetap dalam penyemak imbas mudah alih

Question

Saya mempunyai masalah yang sangat pelik... Saya mendapat kelakuan ini dalam setiap penyemak imbas dan versi mudah alih yang saya temui:

• Apabila halaman dimuatkan, semua penyemak imbas mempunyai menu teratas (cth. menunjukkan bar alamat) yang meluncur ke atas apabila anda mula menatal.
• Kadangkala, 100vh hanya dikira pada bahagian yang boleh dilihat pada port pandangan, jadi apabila bar penyemak imbas meluncur ke atas, 100vh meningkat (dalam piksel)
• Semua reka letak akan dilukis semula dan diubah saiz kerana dimensi telah berubah
• Tidak bagus untuk pengalaman pengguna

Bagaimana untuk mengelakkan masalah ini? Apabila saya mula-mula mendengar tentang ketinggian viewport, saya teruja, saya fikir saya boleh menggunakannya dan bukannya menggunakan JavaScript untuk menetapkan ketinggian tetap untuk blok, tetapi sekarang saya fikir satu-satunya cara sebenarnya ialah menggunakan JavaScript dan beberapa saiz semula Acara...< /p>

Anda boleh melihat masalahnya di sini: Tapak Contoh

Bolehkah sesiapa membantu saya menyelesaikan ini/menyediakan penyelesaian CSS?

---

Kod ujian mudah:

/* Mungkin saya boleh menjejaki bila masalah itu berlaku... */
$(fungsi(){
  saiz var = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    jika (++saiz semula) $('#currenth').css('background:#00c');
  })
  .resize();
})

*{ margin:0;

/*
  Ini adalah kotak yang sepatutnya kekal pada ketinggian yang sama...
  Gunakan ketinggian min untuk membenarkan kandungan melebihi ketinggian port pandangan jika terdapat terlalu banyak teks
*/
.vhbox{
  ketinggian min: 100vj;
  jawatan:saudara;
}

.vhbox .t{
  paparan:meja;
  jawatan:saudara;
  lebar: 100%;
  ketinggian: 100vh;
}

.vhbox .c{
  ketinggian:100%;
  paparan:table-cell;
  vertical-align:middle;
  text-align:center;
}

<div class="vhbox" style="background-color:#c00">
  <div class="t"><div class="c">
  Ketinggian div ini hendaklah 100% daripada port pandangan dan mengekalkan ketinggian ini apabila menatal halaman
    <br>
    <!-- Jika peristiwa ubah saiz dicetuskan, kotak input ini akan diserlahkan -->
    <input type="text" id="currenth">
  </div></div>
</div>

<div class="vhbox" style="background-color:#0c0">
  <div class="t"><div class="c">
  Ketinggian div ini hendaklah 100% daripada port pandangan dan mengekalkan ketinggian ini apabila menatal halaman
  </div></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 1

Anda boleh cuba menggunakan min-height: -webkit-fill-available;而不是100vh dalam css anda. Ini sepatutnya berjaya

Answer 2

Malangnya, ini disengajakan...

Ini adalah isu yang terkenal (sekurang-kurangnya dalam mudah alih Safari) dan disengajakan kerana ia menghalang isu lain. Benjamin Poulain membalas pepijat webkit:

Nicolas Hoizey telah melakukan sedikit penyelidikan tentang perkara ini: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document- dalam -some-mobile-browsers.html

Tiada pembaikan dirancang

Pada masa ini, tidak banyak yang boleh anda lakukan kecuali mengelak daripada menggunakan ketinggian port pandangan pada peranti mudah alih. Chrome juga berubah pada 2016:

• https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BK0oHURgmJ4
• https://developers.google.com/web/updates/2016/12/url-bar-resizing