Mobile CSS height 100% + Chrome browser?
I need the div to take up 100% of the mobile view screen. Initially, I just set its height and width to 100%.
However, now Im hiding the Chrome browser with the following JavaScript:
setTimeout(function() {
window.scrollTo(0, 1) },
100);
As a result, the height is 100% minus the height of the Chrome browser. Also, javascript works by scrolling the page so that the chrome is hidden, and this can only happen if the page is taller than the div.
How can I get around this? The only way to use device detection and add chrome height value in browser in pixels on each device? I'd like to avoid this if possible. thank
source to share
If I am not mistaken, your problem is mainly related to iPhone Safari.
The simplest solution is probably to check the page height change at every given spacing and change the container height accordingly. In my experience the CSS solution doesn't work.
var prevPageHeight = 0;
function setHeight() {
$('#container').height( window.innerHeight );
prevPageHeight = window.innerHeight;
}
setInterval( function() {
if ( window.innerHeight != prevPageHeight ) {
setHeight();
}
}, 500);
setHeight();
This solution also addresses orientation changes. I'm sure he could easily optimize the function binding to locationChange and scroll events.
source to share