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.
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.
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.
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.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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; }