safari浏览器地址栏遮挡问题

禁止使用100vh

通过JS检测应用程序的高度

const documentHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', documentHeight)
documentHeight()

使用 css 变量 

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100vh;
}

body {
    font-size: 0.24rem;
    font-family: Microsoft YaHei;
    box-sizing: border-box;
    overflow: hidden;
    height: 100vh;
    height: var(--doc-height);
    padding-top: constant(safe-area-inset-top);
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
}

#app {
    height: 100%;
}

底部用fixed定位

position: fixed;
left: 0;
bottom: 0;
z-index: 99;