How to hide the address bar in the browser on android?

I

isxaker2014-05-16 14:52:16

css

isxaker, 2014-05-16 14:52:16

I'm making a mini toy on js for a tablet. I want the size of the visible part to occupy the entire space, including the address bar, but so that there is no scrolling. In other words - I want to hide the address bar when loading and when the screen is rotated.
I do it like this:

//load вызывается при <body onload="load()">
function load() {
    hideAddressBar();
    //  1
    //window.addEventListener("orientationchange", function () {
    //    hideAddressBar();
    //});
}

function hideAddressBar() {
    if (navigator.userAgent.match(/Android/i) != null) {
        //window.orientation 0 - 180 - landscape; 90 and -90 portrait
        document.documentElement.style.height = window.outerHeight + 'px';
        setTimeout(window.scrollTo(0, 1), 0);
    }
}

Works as it should only when loading. How can I make the address bar hide when the screen is rotated? I have an idea, calculate the height of the address bar

addressBarHeight = window.outerHeight - window.innerHeight;

and then add it to the current page height, which is calculated based on the position of the tablet. But how to calculate the current page height? It needs to be calculated according to the css file:

@media screen and (orientation: portrait) {
    html, body {
        height: 100%;
        /*!important;*/
    }
}

@media screen and (orientation: landscape) {
    html, body {
        height: 100%;
        /*!important;*/
    }
}

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

T

Timur, 2014-05-18
@timych

I would advise using phonegap, since you are writing in js.

I

isxaker, 2014-05-21
@isxaker

This crutch works for me ;-)

window.onload = function () {
    hideAddressBar();
    window.addEventListener("orientationchange", function () {
        hideAddressBar();
    }, false);
}

function hideAddressBar() {
    setTimeout(function () {
        document.body.style.height = window.outerHeight + 'px';
        setTimeout(function () {
            window.scrollTo(0, 1);
        }, 1100);
    }, 1000);
    return false;
}

A

Alexander Taratin, 2015-05-11
@Taraflex

www.html5rocks.com/en/mobile/fullscreen
https://github.com/sindresorhus/screenfull.js