不要用100vh做移動(dòng)響應(yīng)

作者：前端小智

簡介：思否百萬閱讀，勵(lì)志退休后，回家擺地?cái)偟娜恕?/span>

來源：SegmentFault  思否社區(qū) 

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

.content {   height: 100vh;
}

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

• 大部分移動(dòng)端的Chrome和Firefox瀏覽器在頂部都有一個(gè)UI（地址欄等）。

• 在Safari瀏覽器上，地址欄在底部，這就變得更加棘手了。

• 不同的瀏覽器有不同大小的視口

• 移動(dòng)設(shè)備計(jì)算瀏覽器視口為（頂欄+文檔+底欄）=100vh

• 整個(gè)文檔使用 100vh 填充到頁面中

問題

---

谷歌

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

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

解決方案

---

通過JS檢測應(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)得到很大的提升。

---

點(diǎn)擊左下角閱讀原文，到 SegmentFault 思否社區(qū) 和文章作者展開更多互動(dòng)和交流，掃描下方”二維碼“或在“公眾號(hào)后臺(tái)“回復(fù)“ 入群 ”即可加入我們的技術(shù)交流群，收獲更多的技術(shù)文章~

- END -