HTML5 移動端適配：禁止縮放、全螢幕鋪滿、響應式佈局核心要點

核心 Meta 標籤

<meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

• width=device-width：佈局視口等於設備獨立像素寬度。
• initial-scale=1.0：初始縮放 1:1，CSS 像素 = 設備獨立像素。
• maximum-scale=1.0, user-scalable=no：禁止用戶手動縮放。

CSS 佈局原則

1. 流式佈局：寬度用 %、vw、rem，避免固定 px。
2. Flexbox / Grid：現代佈局利器，自適應對齊、分配空間。
3. 圖片自適應：img { max-width: 100%; height: auto; }。
4. 字體單位：根節點設 html { font-size: 100px; } (配合 750 設計稿)，元素用 rem，JS 動態計算根字體適配不同 DPR。

常見坑點

• 設計稿 960×640 非標準寬度，需換算比例：rem = 設計稿寬/10 (如 96)，或直接用 vw (1vw = 1% 視口寬)。
• 輸入框聚焦時虛擬鍵盤彈出導致視口縮小，固定底部元素被頂起 → 監聽 resize 或用 position: fixed; bottom: 0 配合 padding-bottom: env(keyboard-inset-height) (iOS)。
• user-scalable=no 影響無障礙訪問，評估業務必要性。