那討人厭的網址列

在移動設備上，100vh 的高度計算常常會因為瀏覽器網址列（URL bar）的存在而產生問題，本文將分享如何解決這個常見的困擾。

問題描述

在開發網頁時，我們經常會使用 100vh 來設置全螢幕高度的元素。但在移動設備上，這個設置會遇到一些問題：

1. 網址列的影響

   • 某些移動瀏覽器的網址列會動態顯示/隱藏
   • 這會導致實際可視區域高度的變化
   • 100vh 的計算包含了網址列的高度

2. 使用體驗問題

   • 頁面可能會出現不必要的捲動
   • 內容可能被網址列遮擋
   • 全螢幕設計的視覺效果被破壞

解決方案

1. 使用 CSS 自定義屬性

// 計算實際視窗高度
function setViewportHeight() {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}

// 初始設置
setViewportHeight();

// 監聽視窗大小變化
window.addEventListener('resize', setViewportHeight);

.full-height {
  height: 100vh; /* 傳統方式 */
  height: calc(var(--vh, 1vh) * 100); /* 使用自定義變數 */
}