all articles

browser offers unstable innerHeight

2015-06-29 @sunderls

iOS android unstable innerHeight js


window.innerHeight offers unstable value. which makes it difficult to create something like full-height.

on Android

android auto-fades addressbar when scrolling down, but not hide it when first loaded. Android offers exact window.innerHeight according to the visibility of addressbar.

android solution

listen to scroll event, and update the height width debouncing.

on iOS

when safari scrolls, address bar and bottom bar toggles, which makes the window.innerHeight unstable. if we listen to scroll event and update the height, 2 swipe will be enough to scroll the very bottom, and it is not very good.

iOS solution

we suppose the user scrolls naturally, and stops at least once before he scroll downs to the bottom.

1.we listen to scroll event and update the height, but only keep the higher one, thus preventing the value from becoming smaller 2.listen to orientaionchang event, and reset the height 3.since user may zoom out, the height we are using must take zoomlevel into consideration.

var isLastTimePortrait = isPortrait(),
    lastHeight = window.innerHeight,
    zoomLevel = 1;

var update = $.debounce(function(){
    var winHeight = window.innerHeight || $(window).outerHeight();
    if (isIOS){
        var isPortrait = isPortrait();
        zoomLevel = getZoomLevel();

        if (zoomLevel == 1){
            if (isPortrait == isLastTimePortrait && winHeight < lastHeight){
                winHeight = lastHeight
            } else {
                lastHeight = winHeight;
        isLastPortrait = isPortrait;

    // do what you want here width the right innerheight
}, 50);

$(window).on('orientationchange scroll', update);