Reactjs - 在移动浏览器（Chrome/Safari）中隐藏地址栏答案

【问题标题】：Reactjs - Hide address bar in mobile browsers (Chrome/Safari)Reactjs - 在移动浏览器（Chrome/Safari）中隐藏地址栏
【发布时间】：2020-01-21 08:28:14
【问题描述】：

我正在使用 Reactjs 构建一个网上商店。我的目标是防止垂直滚动，只使用水平滑块导航。一切正常，在这里您可以看到结果：

所有组件的高度都根据视口高度动态变化，我正在监听变化。总结一下：页面总是正好 100% 高。

我的问题是：

如何删除移动浏览器中的地址栏？我几乎尝试了所有方法。

    window.scrollTo(0,1);
    window.scrollIntoView(behavior: "smooth");

没有工作，即使我将网站的高度增加到 110%。 我看到我的页面在滚动，但内容正在浏览器的地址栏下方滚动。我使用 refs 和 ids 将特定组件滚动到视图中，也没有工作...包装TimeOut 中的 scrollTo 函数无效。地址栏固定在我的页面顶部... 我也不想将页面添加到我的主屏幕并在我的清单中使用元标记。

有什么建议吗？谢谢。

【问题讨论】：

标签： javascript html css reactjs mobile

【解决方案1】：

好吧，我认为这是一个棘手的问题。我相信清单文件中的元标记（如"display": "standalone", 等）并将其添加到主屏幕将是您的最佳选择。

但是，如果您对此已下定决心并需要其他解决方案，我的建议是查看全屏 API。您应该知道 iOS Safari 没有全屏 API。所以对于苹果的移动设备，我相信你唯一的选择是清单/添加到主屏幕。

Google 在此处提供了更多相关信息：https://developers.google.com/web/fundamentals/native-hardware/fullscreen/

祝你好运！

【讨论】：

感谢您的回答。我考虑过“独立”方法，但老实说，我认为没有人会在他的主屏幕上添加网店。我从来没有这样做过......之前偶然发现了那个全屏API，并会再试一次:)
编辑：我看到全屏模式只能由用户手势启动。不完全是我要找的……
我知道 aliexpress 在其 pwa（独立）上与实际应用相比取得了一些成功。值得研究。在机器人上，实际上有一种方法可以将“下载为应用程序”按钮添加到为您添加它的网页上。我希望能尽快看到这个功能添加到 iOS 设备中。但这取决于苹果；）