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

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.