Prevent Address-Bar hiding in mobile Browsers

Question

I\'m currently working on a website with a horizontal layout. All elements are position:absolute with javascript. Their size is calculated with window.innerHeight. My Proble

Answer 1

The most reliable solution may be to use the fullscreen API: http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API

Answer 2

if someone still has this problem with the hiding address bar, this is how its worked for me.

 html, body {
    height: 100%;
 }

 body {
    position: fixed;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: 0 0;
        -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: scroll;
 }

 .background {
    position: fixed;
    background-image: url('...');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
 }

I try a lot of similar code, but android chrome was killing me. Only this worked for me. When you have navigation at the bottom of the page it's major problem with that auto-hide bar.

Answer 3

Use window.innerHeight to set boundaries for your site

You can set html and body or your wrapper to

var height = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);    

Keep in mind, that it needs to be updated on every resize!

window.innerHeight allows you to get the actual height of the inner part of the browser view (no browser bar). You can achieve the height of the content when the bar is visible, or even when it is hidden (swiped down).

In my case:
1. set body to 100vh via CSS.
Unfortunately vh ignores the browser bars, what causes some trouble on mobile devices with modern browsers that hide the bar while/after scrolling. Have a look at.

This is also my solution to problems like those above.

2. Calculate the exact height via JS with the stated function. Update on every resize!
=> the content of the site is now restricted to the inner part of the view.

On mobile:
Android 7.1.1/ Chrome 61.0 iOS 9.3.5/ Safari

=> now the browser bar is no longer hiding on scroll- and swipe-events.

Keep in mind:
It is only working, when you do not use some library that leads to believe you are scrolling horizontal, but actually is using body.height.

Answer 4

With a javascript window.scrollTo(0, 1); you can fix the problem.

Look at http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/ for the solution.

Answer 5

The only soltuion that worked for me was this :

Put the content of your body inside a wrapper with the following style :

.wrapper {
    position: absolute;
    top: 0.5px;
    left: 0;
    right: 0;
    bottom: 0.5px;
    overflow-x: hidden; /* or any other value */
    overflow-y: auto; /* or any other value */
}

the half-pixel offsets will be invisible but they will prevent the body from being considered as scrollable by the browser, thus preventing the address bar from hiding.

Answer 6

This is the way I have achieved it:

html {
  background-color: red;
  overflow: hidden;
  width: 100%;
}

body {
  height: 100%;
  position: fixed;
  /* prevent overscroll bounce*/
  background-color: lightgreen;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /* iOS velocity scrolling */
  width: 50%;
  margin-left: 25%;
}