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

Question

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

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

我的问题是：

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

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

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

有什么建议吗？谢谢。

Answer 1

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

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

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

祝你好运！