最近做專案時，設計師希望行動版第一區塊可以滿版呈現，而當下第一個念頭就是用 vh 來做，但實際在手機看時發現，不管是 Chrome 或 Safari 瀏覽器，底下的 UI 工具列都會擋到內容，沒辦法完整呈現 🤔

就像這樣內容會被瀏覽器底下的地址欄蓋住

為了解決 vh 單位在某些情況下無法準確反映視口高度的問題，CSS 增加了三種單位的規範

小型可視區域 (Small Viewport Units)：svh
大型可視區域 (Large Viewport Units)：lvh
動態可視區域 (Dynamic Viewport Units)：dvh

#svh 小型可視區域

svh 則會計算網址列與工具列，扣掉瀏覽器UI元素後的安全可視區域高度百分比。
例如：在具有 1080 像素高度的顯示器上，如果地址欄佔用 100 像素，則 svh 的值為 980 像素。

#lvh 大型可視區域

lvh 不會計算網址列與工具列，即為螢幕解析度高度百分比。
例如：在具有 1080 像素高度的顯示器上，lvh 的值為 1080 像素。

#dvh 動態可視區域

dvh 會根據瀏覽器視窗尺寸的變化來調整高度，反映當前可視區域的百分比，這包括了可能隨時出現或隱藏的 UI 元素。
例如：在具有 1080 像素高度的顯示器上，如果瀏覽器的地址欄和工具欄佔用 100 像素且虛擬鍵盤佔用 200 像素時，dvh 的值將為 780 像素。隨著這些 UI 元素的出現或消失，dvh 的值會動態更新。

這邊也做了 demo，方便大家觀察差異

👉 Demo 連結

#瀏覽器支援度

需要注意的是，目前 svh、lvh、dvh 的支援度還沒有每個瀏覽器都支援，不過主流的瀏覽器，像是 Chrome、Edge、Safari、Firefox 都已支援，個人覺得這樣已經很足夠，IE 我已不抱希望 😂

結語

在前端開發中，確保網站在各種設備上的良好顯示是至關重要的。傳統的 vh 單位在行動設備上可能會遇到一些挑戰，特別是在瀏覽器的 UI 工具列擋住內容時。新引入的 svh、lvh 和 dvh 單位提供了更靈活和精確的解決方案，讓我們能夠更好地控制視口高度，應對各種不同的情況。

透過這些新的單位，我們可以確保網站在移動設備上的顯示更加一致，無論是地址欄、工具欄的出現或消失，都能動態調整內容的呈現方式。雖然這些單位的支援度尚未完全普及，但主流瀏覽器的支援已經足夠應對大多數情況，讓我們能夠更自信地使用這些新技術來提升用戶體驗。

👉 Demo 連結

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Lala Code

如何用CSS控制移動端可視區域？使用lvh, svh, dvh單位優化網站