一般來(lái)說(shuō)，我們使用 height:100vh 進(jìn)行全屏布局，這是一種很方便的響應(yīng)式方法。

.content {
   height: 100vh;
}

但當(dāng)在實(shí)際設(shè)備上測(cè)試我們的設(shè)計(jì)時(shí)，我們遇到了幾個(gè)問題：

• 大部分移動(dòng)端的Chrome和Firefox瀏覽器在頂部都有一個(gè)UI（地址欄等）。
• 在Safari瀏覽器上，地址欄在底部，這就變得更加棘手了。
• 不同的瀏覽器有不同大小的視口
• 移動(dòng)設(shè)備計(jì)算瀏覽器視口為（頂欄+文檔+底欄）=100vh
• 整個(gè)文檔使用 100vh 填充到頁(yè)面中

?問題

谷歌?：

已檢測(cè)到滾動(dòng)條問題。糟糕的用戶滾動(dòng)和難以瀏覽的內(nèi)容。

注意：在Safari上測(cè)試了這個(gè)問題，它更加糟糕。

解決方案

通過JS檢測(cè)應(yīng)用程序的高度

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

使用 css 變量：

:root {
 --doc-height: 100%;
}

html,
body {
 padding: 0;
 margin: 0;
 height: 100vh; /* fallback for Js load */
 height: var(--doc-height);
}

最后結(jié)果

現(xiàn)在沒有任何額外的垂直滾動(dòng)條出現(xiàn)，Safari也沒有問題，這樣的用戶體驗(yàn)得到很大的提升。