不要用100vh做移動響應

前端小智發表於2022-06-06
本文首發於微信公眾號：大遷世界, 我的微信：qq449245884，我會第一時間和你分享前端行業趨勢，學習途徑等等。
更多開源作品請看 GitHub https://github.com/qq449245884/xiaozhi ，包含一線大廠面試完整考點、資料以及我的系列文章。

一般來說，我們使用 height:100vh 進行全屏佈局，這是一種很方便的響應式方法。

.content {
   height: 100vh;
}

但當在實際裝置上測試我們的設計時，我們遇到了幾個問題。

  • 大部分移動端的Chrome和Firefox瀏覽器在頂部都有一個UI（位址列等）。
  • 在Safari瀏覽器上，位址列在底部，這就變得更加棘手了。
  • 不同的瀏覽器有不同大小的視口
  • 移動裝置計算瀏覽器視口為（頂欄+文件+底欄）=100vh
  • 整個文件使用 100vh 填充到頁面中

問題

谷歌

已檢測到捲軸問題。糟糕的使用者滾動和難以瀏覽的內容。

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

解決方案

透過JS檢測應用程式的高度

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);
}

最後結果

現在沒有任何額外的垂直捲軸出現，Safari也沒有問題，這樣的使用者體驗得到很大的提升。

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

作者：nirazanbasnet 譯者：前端小智 來源：dev

原文：https://dev.to/nirazanbasnet/...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章