Edge瀏覽器軟鍵盤彈出后頁面滾動且高度不適應怎么辦

edge瀏覽器軟鍵盤彈出導致頁面滾動及高度錯亂的解決方案

使用手機edge瀏覽器時，輸入框彈出軟鍵盤后，頁面高度未能自動調整以適應可視區域，且頁面仍可滾動，影響用戶體驗。本文分析此問題并提供解決方案。

問題：頁面結構簡潔，僅含輸入框和背景色設置，但軟鍵盤彈出后，頁面背景高度不變，出現滾動條。

解決方案：利用css樣式和html結構優化。

1. 容器化輸入框: 使用一個div元素（例如，class為“.frame”）包裹輸入框，方便后續樣式調整。

2. 禁止頁面滾動: 在body元素中添加以下CSS樣式：

body {   overflow: hidden;   touch-action: none; }

overflow: hidden; 防止頁面內容溢出，阻止滾動；touch-action: none; 阻止觸摸事件導致的滾動。

3. 頁面高度自適應: 監聽頁面尺寸變化（resize事件），動態調整頁面高度：document.body.style.height = visualViewport.height + ‘px’; 這將使頁面高度與可視區域高度保持一致。

局限性：即使采用以上方法，在某些情況下，例如拖動可滾動元素（如可滾動輸入框），仍可能導致頁面滾動。 這需要更深入的探討和更復雜的方案來徹底解決。