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

Question

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

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

我的问题是：

如何删除移动浏览器中的地址栏？ 我几乎尝试了一切。

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

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

有什么建议么？ 谢谢。

Answer 1

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

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

谷歌在这里提供了更多关于此的信息：https://developers.google.com/web/fundamentals/native-hardware/fullscreen/

祝你好运！