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.

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.

• javascript
• html
• css
• google-chrome

• I would let the user decide.. Bet there is a feature the user can use on the client side. Guess if you have a website that is designed for Android tablets, you could be better of writing an app. – Hagbart Celine Commented Nov 12, 2013 at 21:20
• Actually the application is just for me. Unfortunately I did not find this feature on the client side to hide the toolbar. As I would like to be able to show it on my tablet merely for demonstration purposes, and it has to work on desktop too, writing an app would not work in this case. – Borre Mosch Commented Nov 12, 2013 at 21:24
• Possible duplicate of stackoverflow./questions/17791705/… – Moob Commented Nov 12, 2013 at 21:27
• 1 put some empty space up top so you can scroll down to hide the url bar without losing real estate. – dandavis Commented Nov 12, 2013 at 21:31

2 Answers 2

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;
}

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