我知道有多個與此相關的問題，但由於瀏覽器團隊自提出這些問題以來已經做出了更改，因此這些問題似乎都不再有效。我正在嘗試找到此問題的最新解決方案。
我的願望是在使用行動網路瀏覽器時，特別是當使用者將焦點放在輸入欄位上並且顯示虛擬鍵盤時，將固定標題保持靜止在頂部，以獲得類似應用程式的體驗。
最近，Chrome 行動團隊更改了調整行動網路佈局和視覺視窗大小的方式，以便與 iOS 上的 Chrome 和 iOS 上的行動 Safari 保持一致。
這個來自David Fedor 文章的GIF 非常簡潔地展示了大多數（但不是全部）移動瀏覽器的當前狀態，即當屏幕鍵盤（OSK，又名虛擬鍵盤）時視覺視口“向上移動”當某個字段獲得焦點時顯示。
我面臨的最大問題是，當顯示 OSK 時，我無法讓標題元素在視覺上保持在頂部。當您的頂部應用程式列具有「儲存」等表單的主要操作時，這是一件大事。它使用戶體驗變得混亂，導致客戶沮喪地離開，所以在我看來這並不是一件小事。
我已經嘗試了Chrome 團隊推薦的VisualViewport API，引用了env(keyboard-inset-height) ，但這似乎不起作用，這讓我覺得我在佈局上做了一些奇怪的事情，例如ENV 未正確設定。
沒什麼太瘋狂的，使用 CSS 網格來控制佈局。
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>
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;
}
我得到的是以下兩張螢幕截圖，全頁一張是我想要的佈局，第二張是當您將遊標聚焦到底部附近的輸入時，它「推動」整個視覺視窗向上，使標題位於螢幕外。
| 全螢幕 | 以輸入為中心 |
|---|---|
目前有什麼方法可以確保標題始終保持在視覺視窗的頂部嗎？在最近的 Chrome 更新後，我目前找不到有效的解決方案。
P粉5739437552024-03-28 11:21:21
對於Google Chrome 108 或更高版本，設定<meta name="viewport" content="width=device-width, initial-scale=1.0, Interactive-widget=resizes-content">。
注意 viewport 元標記中的 interactive-widget# 屬性.
我找到了解決方案這裡。
檢查了 Android 版 Chrome 的最新版本。
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 header main 2