7

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:

web application not shown fullscreen

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.

Borre Mosch
  • 4,404
  • 2
  • 19
  • 28
  • 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 Nov 12 '13 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 Nov 12 '13 at 21:24
  • Possible duplicate of http://stackoverflow.com/questions/17791705/hide-mobile-browser-address-bar-on-chrome-android – Moob Nov 12 '13 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 Nov 12 '13 at 21:31

2 Answers2

5

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;
}
Borre Mosch
  • 4,404
  • 2
  • 19
  • 28
0

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

James Cain
  • 61
  • 3
  • 1
    This will not work by itself since the document cannot be scrolled at all, which is what this script tries to do. – Borre Mosch May 12 '14 at 13:47