最近做專案時，設計師希望行動版第一區塊可以滿版呈現，而當下第一個念頭就是用 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 連結
