Bar alamat/bar URL kekal tidak berubah apabila menatal pada Safari mudah alih

Question

Saya sedang membina tapak web menggunakan React (16.8.6), tetapi pada Safari mudah alih, apabila pengguna mula menatal, ia tidak meruntuhkan/mengecilkan bar URL seperti yang dilakukan oleh tapak web lain.

CSs untuk div pembalut kelihatan seperti ini:

<ContentContainer>
    <TatalBekas>
        {...otherComponentsHere}
    <TatalBekas/>
<ContentContainer/></pra>
<pre class="brush:css;toolbar:false;">const ContentContainer = styled.div`
  ketinggian: 100% /*Benarkan dua lajur untuk menduduki keseluruhan ketinggian tetingkap penyemak imbas*/
  limpahan-y: auto;
  flex-grow: 1;
  paparan: flex;
  flex-direction: lajur;
`;
const ScrollContainer = styled.div`
  lentur: 1;
`;

App.css kelihatan seperti ini:

html {
  ketinggian: 100%;
  ketinggian min: 100vj;
}

badan {
  font-family: 'Work Sans', 'Courier New', sans-serif;
  ketinggian min: 100%;
  ketinggian: 100%;
  jidar: 0px;
}
#aplikasi {
  ketinggian: 100%;
}

#root {
  ketinggian: 100%;
  paparan: flex;
  limpahan: tersembunyi; /*Jadikan badan tidak boleh ditatal*/
  saiz kotak: kotak sempadan;
}

Saya cuba memikirkan isu dalam CSS ini yang menghalang bar URL Safari daripada runtuh semasa pengguna menatal. Terima kasih atas bantuan anda.

Answer 1

Untuk meruntuhkan/mengecilkan bar URL dalam Safari mudah alih, anda mesti mempunyai body溢出视口，但这里并非如此：您的body不可滚动，而且您的ContentContainer anda sepenuhnya dalam port pandangan.

Untuk menguji ini, buat halaman baharu tanpa CSS dan letakkan kandungan yang mencukupi dalam body untuk menjadikan halaman itu boleh ditatal.