Bagaimana untuk mengekalkan tajuk di atas port pandangan visual selepas perubahan reka letak/port pandangan visual dalam web mudah alih Chrome?
P粉833546953
P粉833546953 2024-03-28 00:24:35
0
1
384

Saya tahu terdapat berbilang soalan yang berkaitan dengan perkara ini, tetapi tiada satu pun daripadanya nampaknya sah lagi memandangkan pasukan penyemak imbas telah membuat perubahan sejak soalan ini ditanya. Saya cuba mencari penyelesaian terkini untuk masalah ini.

Matlamat

Hasrat saya ialah agar pengepala tetap kekal di atas apabila menggunakan penyemak imbas web mudah alih, terutamanya apabila pengguna memfokuskan pada medan input dan papan kekunci maya ditunjukkan, untuk pengalaman seperti aplikasi.

Konteks latar belakang

Baru-baru ini, pasukan mudah alih Chrome mengubah cara reka letak web mudah alih dan port pandangan visual diubah saiz agar selaras dengan Chrome pada iOS dan Safari mudah alih pada iOS.

GIF daripada artikel David Fedor ini dengan sangat ringkas menggambarkan keadaan semasa kebanyakan (tetapi bukan semua) penyemak imbas mudah alih, iaitu port pandangan visual "bergerak ke atas" apabila papan kekunci pada skrin (OSK, aka papan kekunci maya) Dipaparkan apabila medan mempunyai fokus.

Masalah terbesar yang saya hadapi ialah saya tidak dapat memastikan elemen tajuk kekal teratas secara visual apabila OSK dipaparkan. Ini adalah masalah besar apabila bar apl teratas anda mempunyai tindakan utama dalam bentuk "Simpan". Ia mengacaukan pengalaman pengguna dan menyebabkan pelanggan meninggalkan kekecewaan, jadi ia bukan perkara kecil pada pendapat saya.

Saya telah mencuba API VisualViewport yang disyorkan oleh pasukan Chrome, dirujuk env(keyboard-inset-height) , tetapi itu nampaknya tidak berkesan, yang membuatkan saya fikir saya melakukan sesuatu yang pelik dengan reka letak, seperti ENV tidak ditetapkan dengan betul.

Kod saya

Tiada yang terlalu gila, gunakan Grid CSS untuk mengawal reka letak.

HTML

<html>
<body>
  <div id="container">
    <header id="header">header</header>
    <main id="main">
      main
      <input type="text" />
    </main>
    <footer id="footer">footer</footer>
  </div>
</body>
</html>

Gaya CSS

body {
  margin: 0;
}

#container {
  height: 100dvh;
  display: grid;
  grid-template:
    "header" 50px
    "main" 1fr
    "footer" 50px
    "keyboard" env(keyboard-inset-height, 0px); // does not seem to work?
}

#header {
  grid-area: header;
}

#main {
  grid-area: main;
  overflow-y: scroll;
}

#footer {
  grid-area: footer;
}

Apa yang saya dapat ialah dua tangkapan skrin berikut, halaman penuh satu ialah reka letak yang saya mahu dan yang kedua ialah apabila anda memfokuskan kursor pada input berhampiran bahagian bawah ia "menolak" keseluruhan paparan visual sehingga menjadikan tajuk Terletak di luar skrin.

Skrin penuh Berpusatkan input

Adakah pada masa ini terdapat sebarang cara untuk memastikan tajuk sentiasa berada di atas port pandangan visual? Selepas kemas kini Chrome baru-baru ini, saya tidak dapat mencari penyelesaian yang berfungsi pada masa ini.

P粉833546953
P粉833546953

membalas semua(1)
P粉573943755

Untuk Google Chrome 108 atau lebih tinggi, tetapkan <meta name="viewport" content="width=device-width, initial-scale=1.0, Interactive-widget=resizes-content">.
Perhatikan atribut viewport 元标记中的 interactive-widget.

Saya jumpa penyelesaiannya di sini.
Menyemak versi terkini Chrome untuk Android.

body {
  margin: 0;
}

#container {
  height: 100dvh;
  display: grid;
  grid-template:
    "header" 50px
    "main" 1fr
    "footer" 50px
  ;
}

#header {
  grid-area: header;
}

#main {
  grid-area: main;
  overflow-y: scroll;
}

#footer {
  grid-area: footer;
}


  Title
  


main 2

































footer
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan