在 Android 上的移动浏览器中向下滚动时，网站不会隐藏地址栏答案

【问题标题】：Site doesn't hide address bar when scroll down in mobile browsers on Android在 Android 上的移动浏览器中向下滚动时，网站不会隐藏地址栏
【发布时间】：2020-03-03 06:19:51
【问题描述】：

我通过“create-react-app”功能（使用哈希路由器，如果有帮助的话）制作了简单的 React 应用程序，并将其部署在 github-pages 上。但是，不幸的是，当我向下滚动时，我的所有页面都不会在移动浏览器中隐藏地址栏。页面高度当然是 100% 以上。有类似的问题：Force hide address bar in Chrome on Android ，但对我来说没有解决方案。这不是一个混合应用程序或其他东西，它只是一个站点。我不需要在加载时隐藏地址栏，只需向下滚动时，向上滚动时弹出它。我认为默认情况下这只是网站的正常行为，不是吗？也许我需要在我的 .html/.css/.jsx/.json 文件中添加/删除一些东西以使其可以使用（也许我删除了一些对它很重要的东西，我不知道），但我找不到它们之间的区别我的网站和其他网站，写在 React 或纯 html/css/js 堆栈上。我也尝试在这里和互联网上查找信息，花了大约 2 个小时。我很绝望。

在这里学习了以下问题：

hide mobile browser address bar on chrome (android)

How to hide the toolbar in Chrome for Android tablets for a 100% high website

Hide address bar in android chrome browser with scroll down gesture

Hide scroll bar, but while still being able to scroll

How to hide a mobile browser's address bar?

【问题讨论】：

标签： javascript android html css reactjs

【解决方案1】：

找到原因。希望它能帮助那些和我犯过类似有趣错误的人。

关键是我嵌入了以下代码以避免背景问题（它没有覆盖页面的整个区域）：

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

当然，它会阻止身高的增长，尽管视觉内容超过 100%。即使我从这个规则集中删除 #root，它也无济于事，尽管 #root 会比 html 和 body 大。

解决方案是改为设置最小尺寸（当然，除了删除#root）：

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

抱歉打扰了各位）

【讨论】：