How Can I Hide Kindle Navigation Bar in Web App

Question

I have a web app in React that will mostly be used on a Kindle Fire. We are going to switch to React Native soon, but before we do we would like to test the flow of the user story using a web app. We designed the app for the full screen size of the Kindle and it is really inconvenient that the navigation bar pushes the content up and causes the content to become scrollable, which makes the browser switch in and out of Silk fullscreen mode and keeps hiding then revealing the url bar.

Is there a way to tell the Kindle from the webpage to turn off the navigation bar?

Please post your PWA manifest, or at least what you have written for the `display` value. — Chunky Chunk, Feb 11 '20 at 23:18
It's not a PWA it's on the Internet - it is accessed via the browser — Davtho1983, Feb 12 '20 at 07:41

score 1 · Accepted Answer · answered Feb 12 '20 at 11:19

This is a common problem that can be easily solved with just a few lines of rudimentary CSS.

:root {
    height: 100%
}

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

If you still want to be able to toggle the visibility of the mobile browser's address bar with scrolling while having your application resize responsively, just set the root/html height greater than 100% or, ideally, 100vh.

:root {
    height: 100vh;
}

You can read more about this technique here: URL Bar Resizing

How Can I Hide Kindle Navigation Bar in Web App

1 Answers1