CODEWITHSUNDEEP
cssmobilefullscreen
Evanss
Evanss

Reputation: 23553

Mobile CSS height 100% + browser chrome?

Im want a div to take up 100% of the viewport for mobile devices. Initially I just set it’s height and width to 100%.

However now I’m hiding the browser chrome with the following JavaScript:

setTimeout(function() { 
window.scrollTo(0, 1) }, 
100);

The result is that the height is 100% minus the browser chrome height. Also, the javascript works by scrolling down the page enough that the chrome is hidden, and this can only happen if the page is taller than the div im using.

How can I get around this? Is the only way to use device detection and add the browser chrome height value in pixels on a per device basis? Id like to avoid this if possible. Thanks

Upvotes: 4

Views: 4194

Answers (1)

Davide
Davide

Reputation: 2339

If I'm not wrong your problem is mostly related to Safari iPhone.

The easiest solution is probably to check for the a page height change every set interval, and change your container's height accordingly. No CSS solution is working, in my experience

var prevPageHeight = 0;

function setHeight() {
    $('#container').height( window.innerHeight );
    prevPageHeight = window.innerHeight;
}

setInterval( function() {
  if ( window.innerHeight != prevPageHeight ) {
    setHeight();
  }
}, 500);

setHeight();

This solution also consider orientation change. I'm pretty sure it could easily optimized binding the function to the orientationChange and scroll events.

Upvotes: 5

Related Questions