Chrome 手機模擬器無水平捲動條？這不是 Bug，是 Viewport 機制使然

現象描述

開發者在 Chrome DevTools 切換至 iPhone 5 模擬器時，發現未設定 <meta name="viewport"> 的網頁並未出現水平捲動條，誤以為是瀏覽器 Bug。

真相：行動裝置瀏覽器的預設排版策略

• Android（Chrome）：預設以 980px 虛擬視窗寬度呈現頁面，再縮放至螢幕寬度，因此會出現水平捲動條。
• iOS（Safari / Chrome iOS）：預設採用 自動縮放，將頁面寬度強制等於裝置視窗寬度（如 iPhone 5 的 320px），內容自動重排，故不會出現水平捲動條。

Chrome 桌面版模擬器的行為

Chrome DevTools 的裝置模擬器模擬的是 iOS Safari 的行為：當偵測到無 viewport 設定時，自動套用「寬度等於裝置寬度」的縮放策略，因此不顯示水平捲動條。這符合真機 iOS 表現，並非 Bug。

正確做法：明確宣告 Viewport

在 <head> 加入：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width=device-width：告訴瀏覽器「虛擬視窗寬度 = 裝置螢幕寬度」。
• initial-scale=1.0：初始縮放比例 100%。

加上此標籤後，Android、iOS、桌面模擬器皆會以一致方式排版，避免猜測預設行為。

補充：模擬器與真機差異

1. 像素密度（DPR）：模擬器無法完美模擬真機的 devicePixelRatio。
2. 觸控事件：滑鼠事件與觸控事件（touchstart/move/end）觸發時機不同。
3. 效能：桌面 CPU/GPU 遠強於手機，JS 執行速度、記憶體壓力差異大。

結論：Chrome 模擬器表現正常，請務必在專案初期加入 viewport meta 標籤，並以真機測試為準。