mui 沉浸式状态栏显示出问题

这个需要设置你的header高度和padding的距离。我之前也是为了弄这个沉浸式花了很长时间。因为每个设备的导航栏高度不一样，尤其是安卓。js动态获取导航栏高度然后赋值padding，这个会有一个问题就是页面加载的一瞬间会动态计算一下导致页面加载用户体验不好。这个我还没解决。我就让body在加载完成后再显示。
附上一段代码
var ms = (/Html5Plus\/.+\s(.(Immersed\/(\d+.?\d).*))/gi).exec(navigator.userAgent);
if(ms && ms.length >= 3) {
immersed = parseFloat(ms[2]);
}
w.immersed = immersed;

if(!immersed) {  
    return;  
}  
var t = document.getElementById('header');  
//console.log("信号栏高度："+immersed);  
//t&&(t.style.paddingTop=immersed+'px',t.style.background='-webkit-linear-gradient(top,rgba(215,75,40,1),rgba(215,75,40,0.8))',t.style.color='#FFF');  
t && (t.style.paddingTop = immersed + 'px');  

t = document.getElementById('content');  
t && (t.style.marginTop = immersed + 'px');  
t = document.getElementById('scontent');  
t && (t.style.marginTop = immersed + 'px');  
t = document.getElementById('dcontent');  
t && (t.style.marginTop = immersed + 'px');  
t = document.getElementById('map');  
t && (t.style.marginTop = immersed + 'px');