在 Android 上的移動瀏覽器中向下滾動時，站點不會隱藏地址欄

Question

我通過“create-react-app”function（使用哈希路由器，如果有幫助的話）制作了簡單的 React 應用程序，並將其部署在 github-pages 上。 但是，不幸的是，當我向下滾動時，我的所有頁面都不會在移動瀏覽器中隱藏地址欄。 頁面高度當然是 100% 以上。 有類似的問題： Force hide address bar in Chrome on Android ，但我沒有解決方案。 這不是一個混合應用程序或其他東西，它只是一個站點。 我不需要在加載時隱藏地址欄，只需向下滾動時，向上滾動時彈出它。 我認為默認情況下這只是網站的正常行為，不是嗎？ 也許我需要在 my.html/.css/.jsx/.json 文件中添加/刪除某些內容以使其可行（也許我刪除了一些對它很重要的東西，我不知道），但我找不到它們之間的區別我的網站和其他網站，寫在 React 或純 html/css/js 堆棧上。 我還嘗試在這里和互聯網上查找信息，花了大約 2 個小時。 我很絕望。

在這里學習了以下問題：

在 chrome (android) 上隱藏移動瀏覽器地址欄

如何在 Chrome 中為 Android 平板電腦隱藏工具欄以實現 100% 高網站

使用向下滾動手勢隱藏 android chrome 瀏覽器中的地址欄

隱藏滾動條，但仍然可以滾動

如何隱藏移動瀏覽器的地址欄？

Answer 1

找到了原因。 希望它能幫助像我一樣犯過類似有趣錯誤的人。

關鍵是我嵌入了以下代碼以避免背景問題（它沒有覆蓋整個頁面區域）：

html, body, #root {
  width: 100%;
  height: 100%;}

當然，它會阻止身高的增長，盡管視覺內容超過 100%。 即使我從這個規則集中刪除#root ，它也無濟於事，盡管#root會大於 html 和 body。

解決方案是改為設置最小大小（當然，除了刪除#root）：

html, body {
  min-width: 100%;
  min-height: 100%;}

抱歉打擾了各位）