all articles

how to hide tabs on iPhone6Plus

2015-07-05 @sunderls

iphone6plus tabs landscape js

desc

iPhone6plus will show tabs like pc browsers if multipages are opened, on landscape mode. If we do some thing like full-height web app on portrait mode, it is not that cool if we see those tabs after rotating to landscape mode.

We want to hide the tabs

here are the facts.

1. if page has scrolled for some distance in portrait, then rotating will not triggers tabs & addressbar out

2. if page has no scroll position, like full-height web-app, rotating may trigger addressbar&tabs; out. sometime yes, sometime no.

on the second condition, how can we hide the tabs?

workaround

since we have already know that it will not show address bar if we have scrolled a little in portrait, so we can fake the scroll position before rotating to landscape:

    function tryHideTabs(){
        // we use an interval here, setTimeout doesn't work very well
        var interval = setInterval(function(){
            $('body').scrollTop(10);
        }, 50);    

        setTimeout(function(){
            clearTimeout(function(){ clearInterval(interval); }, 1000);
        })
    }

    if (isIOS){
        // insert a div to create scroll position
        var $thub = $('<div ></div>');
        $('body').append($fix);
        $('body').css('padding-top', '10px');
        tryHideTabs();
    }

    // call this func when needed, such as onOrientationchange, onResize
    tryHideTabs();