如何在 Web 应用程序中隐藏 Kindle 导航栏

Question

我在 React 中有一个 Web 应用程序，主要用于 Kindle Fire。我们将很快切换到 React Native，但在此之前，我们想使用 Web 应用程序测试用户故事的流程。我们针对kindle全屏尺寸设计了app，导航栏将内容上推导致内容变成可滚动，导致浏览器进出Silk全屏模式一直隐藏又显示，实在不方便url 栏。

有没有办法从网页告诉Kindle关闭导航栏？

Answer 1

这是一个常见问题，只需几行基本代码即可轻松解决 CSS。

:root {
    height: 100%
}

.app {
    height: 100%
    position: fixed;
}

如果您仍然希望能够通过滚动来切换移动浏览器地址栏的可见性，同时让您的应用程序响应式调整大小，只需将 root/html 高度设置为大于 100%，或者最好设置为 100vh。

:root {
    height: 100vh;
}

您可以在此处阅读有关此技术的更多信息：URL Bar Resizing

如何在 Web 应用程序中隐藏 Kindle 导航栏

How Can I Hide Kindle Navigation Bar in Web App

kindle-fire

reactjs