手機Edge瀏覽器軟鍵盤彈出後頁面滾動問題如何解決？

手機Edge瀏覽器軟鍵盤彈出導致頁面滾動問題及解決方案

使用手機Edge瀏覽器時，輸入框彈出軟鍵盤後，頁面常常出現一個惱人的問題：頁面高度不變，仍可上下滾動，這與預期效果不符，尤其在頁面內容超出屏幕時更為明顯。本文將分析此問題並提供解決方案。

問題簡述：在一個簡單的HTML頁面（包含一個輸入框）中，軟鍵盤彈出後，頁面未能自動調整高度以匹配可視區域，而是保留原始高度，導致出現滾動條並可滾動超出屏幕內容，影響用戶體驗。

解決方案一：使用容器控制滾動

通過CSS樣式和HTML結構調整，可有效解決此問題。方法是：用一個div容器包裹輸入框，並設置body的overflow屬性為hidden ，同時設置touch-action屬性為none 。

HTML代碼：

<div class="frame">
  <input type="text">
</div>

CSS代碼：

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

overflow: hidden阻止body滾動， touch-action: none進一步禁止觸摸滾動。 .frame容器則包含輸入框，確保輸入框區域可正常顯示和交互。

解決方案二：動態調整頁面高度

更簡潔的方案是利用瀏覽器窗口大小改變事件( resize )，動態調整頁面高度。 在resize事件監聽器中，將頁面高度設置為visualviewport.height ，使頁面高度根據可視區域變化而調整。 這需要使用JavaScript實現。

然而，即使採用以上方法，在某些特殊情況下，例如輸入框本身允許滾動，拖動輸入框仍可能導致頁面滾動。 這需要更深入的分析和更複雜的解決方案。

以上是手機Edge瀏覽器軟鍵盤彈出後頁面滾動問題如何解決？的詳細內容。更多資訊請關注PHP中文網其他相關文章！