All geek questions in one place

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

I'm trying to make a web application that is 100% of the screen width and 100% of the screen height, with an aspect ratio of 16: 9. It would be great if I could view this website in full screen on my tablet, but unfortunately , the on-screen toolbar takes up a lot of space, which makes my site not displayed either at full height or in full width:

web application not shown fullscreen

Now I know that recently, you can hide the scroll bar by scrolling down the page ( source ). However, since my web application is 100% higher, I cannot hide the toolbar this way.

I was wondering if anyone has any other idea on how I can hide the toolbar. The CSS-only method is preferred (or perhaps some HTML meta tag), but I will also agree to the technique using JavaScript.

+6
source share
2 answers

In the end, I fixed the problem by adding the ability to scroll to my document. I positioned the body element, fixed so that now I can hide the toolbar by expanding upward, but not moving any content. I admit this is a bit hacked.

html { padding-bottom: 1000px; } body { position: fixed; left: 0; top: 0; right: 0; bottom: 0; }
+5
source

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

0
source

Source: https://habr.com/ru/post/957953/

More articles:


All Articles