javascript - Prevent window height change when mobile address bar appears / disapears -

i use jquery height of devices displaying website, make sure homepage has height of 100%, , when scrolled thru, header menu go fixed top. that, measure window innerheight functiun, called on document ready, , window resize events (to keep design clean when user changes portrait / landscpae mode on mobile, or resizes window on desktop).

problem on mobile : adress bar on android displayed on page load, , hides on scroll down, reappears on scroll up. makes page elements change sizes on evey opportunity , moves contents in page. not pleasant user.

function setheight() { windowheight = $(window).innerheight(); $('.home-intro').css('min-height', windowheight); } $( window ).resize(function() { setheight(); }); 

is there way window size, not affected adress bar being displayed or not ?

i know answer year late, i've struggled issue well. i've found using "window.document.documentelement.clientheight" instead of "$(window).innerheight();" makes when address bar disappears min-height targeted elements won't resize again fill 50px or so.

here's i'm using on project:

function adjustbackgrounds() {     windowheight = window.document.documentelement.clientheight;     $('#section-01-home').css('min-height', windowheight); }      // triggers sizing on load (783 = 800px accounting 17px of scrollbar) if ($(window).width() <= 783) {     adjustbackgrounds(); } else {  } // triggers sizing on browser resize (783 = 800px accounting 17px of scrollbar) $(window).resize(function() {   if ($(window).width() <= 783) {     adjustbackgrounds();   } else {    } });