我創建了這個簡單的HTML頁面，頂部有一個固定的條形圖，底部有一個文本元素。滾動時，頂部和底部的所有內容都保持固定。然而，當點擊底部的文本字段內部，激活焦點并顯示鍵盤時，如果你滾動，固定的div會在Chrome Mobile瀏覽器中消失。當你向相反的方向滾動時，它們會重新出現。這種行為在早期的Chrome版本中不存在。當焦點（鍵盤打開）處于活動狀態時，是否可以防止固定框折疊，或者確保它們保持可見？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fixed Elements</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
#oben {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: lightblue;
padding: 10px;
height: 50px;
}
#unten {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: lightgreen;
padding: 10px;
}
#textbereich {
width: 95%;
height: 50px;
}
</style>
</head>
<body>
<div id="oben">
<p>Here is the fixed content at the top.</p>
</div>
<div style="height: 3000px; border: 1px solid; margin: 20px;">text</div>
<div id="unten">
<textarea id="textbereich" placeholder="Fixed text area at the bottom"></textarea>
</div>
</body>
</html>
Proplem
Mobiles的Google Chrome在
108版本之后進行了此更改，因為他們看到這種行為正在影響許多用戶和web開發人員。這是一個真正的失誤，處理復雜的用戶界面和彈出窗口的一半，移動屏幕。以下鏈接可閱讀他們的完整公告。Solution
他們在所有舊行為中添加了一個新的
meta鍵，以實現您的預期行為。簡單地，將這一行添加到您的元標簽中。。。Source: https://developer.chrome.com/blog/viewport-resize-behavior/