How to hide the toolbar in Chrome for Android tablets for a 100% high website

Question

I am trying to make a web application that is 100% of the screen width and 100% of the screen height, with a 16:9 aspect ratio. It would be awesome if I would be able to view this website fullscreen on my tablet, but unfortunately the on-screen toolbar takes up a large amount of space, making my website display neither in full height nor in full width:

Now I know that since recently, it is possible to hide the scrollbar by scrolling the page down ( source ). However, since my web application is 100% high, I am unable to hide the toolbar this way.

I was wondering whether anybody had another idea as to how I would be able to hide the toolbar. A CSS-only (or perhaps some HTML meta tag unknown to me) method is preferred, but I will settle for a technique using JavaScript as well.

Answer 1

In the end I fixed the problem by adding the possibility to scroll to my document. I positioned the body element fixed so that I am now able to hide the toolbar by swiping up but not moving any content. I admit it's a bit of a hack.

html {
    padding-bottom: 1000px;
}

body {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

Answer 2

Here is a JS option that might solve your issue. https://github.com/scottjehl/Hide-Address-Bar/blob/master/hide-address-bar.js