CSS PC 正常移動端側邊留白？用 F12 響應式模式復現，檢查 viewport、box-sizing、溢出隱藏

PC 瀏覽器正常，手機端左右留白。經典響應式佈局問題，90% 由以下原因導致。

排查清單（按優先級）

1. 缺少 viewport meta：
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
2. 元素寬度撐破視口：某固定寬度容器（如 `width: 1200px`）超出螢幕，導致橫向滾動條，背景色未鋪滿。
   修正：`max-width: 100%; box-sizing: border-box;` 或用流式佈局（%、flex、grid）。
3. body/html 無背景色或高度不足：
   html, body { height: 100%; margin: 0; background: #f5f5f5; }
4. 第三方組件/廣告 iframe 撐寬：用 F12 元素檢查器點擊留白區域，定位具體元素，加 `overflow-x: hidden` 或限制其 `max-width`。
5. CSS 媒體查詢斷點邏輯錯誤：檢查 `@media (max-width: 768px)` 內是否誤覆蓋關鍵佈局屬性。

一鍵復現法

1. Chrome 打開頁面 → F12 → 點擊工具欄「Toggle device toolbar」圖標（Ctrl+Shift+M）。
2. 選擇機型（iPhone 14 / Galaxy S23 / 自定義 375×667）。
3. 觀察留白區域，元素面板直接定位罪魁禍首。

通用修正模板

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow-x: hidden; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
img, video { max-width: 100%; height: auto; display: block; }

加上這段 Reset，配合 Flex/Grid 佈局，基本消除移動端留白。