隨著網站的手機使用率越來越高，行動版網站漸漸變成標配，為了避免同時需要維護多個網站或是 SEO 被瓜分，通常會以 RWD（Responsive Web Design） 來開發行動版介面。

進行 RWD 開發時，常常會使用 Chrome DevTools 中的 Mobile viewport simulator 來模擬行動裝置的螢幕寬度，然而事情沒有那麼簡單，即使在 Chrome DevTools 中調整完 CSS，在手機瀏覽器中開啟網頁時總會出現意料之外的破版。

除了 CSS 之外，JavaScript 在不同瀏覽器中的行為也是變幻莫測，最好的方式還是得真機實測，本文的將會以行動版網站開發為主，分別說明：

• Chrome DevTools 裝置模擬器中重要的功能
• Android 和 iOS 的 Remote debugging
• 行動版網頁測試工具

裝置模擬

首先是大家熟知的 Device Toolbar，點擊 DevTools 左上角的手機圖示後瀏覽器會模擬行動版的頁面寬度，工具列中可以模擬多種裝置的螢幕大小例如 Moto G4、iPhone 6/7/8 Plus 等等，還有一些設定：

Throttle

點擊 Online 只有兩個選項，可以限制 CPU 效能和流量：

• Mid-tier mobile – Fast 3G + CPU 4x slowdown
• Low-end mobile – Slow 3G + CPU 6x slowdown

更客製化的設定只能去 Network 或是 Performance 面板，不過最重要的是此處的效能限制是相對於目前的開發環境，如果開發環境的效能比較好可能看不出什麼區別，且真實設備的硬體架構通常和開發環境差異較大。

Rotate

旋轉手機的圖示則是模擬直式螢幕（Portrait）和橫式螢幕（Landscape），可以針對橫式螢幕再精進使用者體驗，另外也可以監聽 orientationchange 事件在螢幕方向改變時做出反應。

Device pixel ratio（DPR）

CSS pixel 大小並不等於螢幕上真實存在的 Pixel 大小，而 DPR 就是他們之間的比例，例如 iPhone X 的 DPR 是 3，而螢幕長寬的 CSS pixels 是 375 x 812，手機的實際 Pixels 就是三倍 1125 x 2436。

行動裝置螢幕雖然比較小，但通常 DPI 較高（Pixels 間的距離較小），瀏覽器會盡可能的顯示所有內容，把 CSS Pixels 縮小到實際 Pixels，結果就是出現三倍小的頁面，因此通常 HTML 會加上這一行：

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

讓瀏覽器維持 CSS Pixels 和 DPR，讓 CSS 30px 的元素實際佔了螢幕的 90 Pixels，才不會讓眼睛脫窗。

Device type

預設模擬行動版設備時點擊事件會變為 touch，而不是原本的 mouse，且 Scrollbar 的樣式也不同，可以從選單裡面在 Mobile/Desktop 和 touch/no touch 之間排列組合。

圖示自動隱藏

另外要注意工具列的設定如果螢幕太窄的話會自動隱藏（用小螢幕時曾經被雷過）

Sensors

按 ESC 打開 Drawer 內的 Sensors 面板，裡面有一些有趣的選項，例如 Geolocation 和 Orientation。

Geolocation

Geolocation 可以用來修改經緯度、語系、時區，另外也可以直接選擇預設的地點，或是 Location unavailable，用來測試無法取得位置的情況。

Orientation

和剛剛提及的 Rotate 不同，此處的 Orientation 是指和地心引力方向的相對旋轉角度，監聽 deviceorientation 事件就能取得當下手機旋轉的角度。

如果搭配 devicemotion 事件監聽加速度就能把手機變成 Switch 搖桿，可以用手機打開 Demo 頁面 Device - Orientation & Motion 頁面試試看這兩個事件，關於事件的介紹：Device Orientation & Motion

Rendering

Drawer 內的 Rendering 面板有另外一些畫面相關的模擬功能：

• Emulate CSS media type – 可用來測試 Print media type，不需要特地按下列印、來觀察結果。
• Emulate CSS media feature prefers-color-scheme – 模擬瀏覽器設定為深色、淺色模式，在 CSS 中可依據深淺色模式加入 Media query，例如預設深色模式：

body {
  background-color: black;
  color: white;
}
@media screen and (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

• Emulate vision deficiencies – 模擬視覺障礙如模糊、色盲。

Remote debugging

在電腦上開發完畢到手機上測試時，如果出現不預期的錯誤但又看不出所以然，可以利用 Remote debugging 在電腦上開啟手機瀏覽器的 DevTools。

Android

請確保手機和電腦的 Chrome 版本相同

• 對著手機設定內的版本號碼連點，直到開啟開發人員選項，在選項裡開啟 USB 偵錯。
• 接上電腦和手機，在電腦的 Chrome 網址列輸入 chrome://inspect
• 手機會跳出允許 USB 偵錯嗎？ 當然允許
• 開啟手機的 Chrome，電腦 Chrome 就會顯示已開啟的頁面

按下 inspect 就會開啟 DevTools 了，左側顯示的雖然是 Screencast，但還是能夠 Inspect 元素，只是 FPS 有點低。

手機瀏覽器的背景顏色真的變了，只是我不知道怎麼證明。另外上方灰白處是瀏覽器的工具列。

iOS (Safari)

首先必須有 iPhone 和 Mac...

• 在 iPhone 進入 Safari 的設定 > Advanced，開啟 Web Inspector 和 JavaScript。
• 打開 Mac 的 Safari > Preferences > Advanced，打開最下面的 Show Develop menu in menu bar。
• 同時打開兩邊的 Safari 後，用實體的線接上手機和電腦，這時手機會跳出 Trust This Computer? 當然選擇 Trust。
• 打開 Mac Safari 的 Develop 選單就可以看到 iOS Safari 目前開啟的網頁，點擊 sh1zuku.csie.io - demo 就會開啟 Safari DevTools。

開啟多個分頁 Safari 地下就會有多個選項

其實跟 Chrome DevTools 還是有幾分相似

測試工具

除了功能面的開發測試，還可能需行動版裝置的效能優化和檢查，以下列出幾個好用的工具：

WebPageTest

和 Performance 面板一樣，可以擷取頁面載入過程的截圖、效能、事件時間軸，但更厲害的是可以選擇不同的地區、裝置來測試頁面，比起 DevTools 中只能模擬螢幕相關的屬性，WebPageTest 會在實機上開啟網頁，顯示最真實的測試結果。

此外 WebPageTest 能比較歷史測試結果、一次執行多種測試、測試連續載入頁面的快取、將測試整合到 CI/CD 等等，是非常全面的網頁測試工具。

Mobile friendly test

輸入想要測試的網址後，會顯示 Googlebot 實際爬完頁面的結果（會受到 robot.txt 影響），同時顯示該網站在行動版裝置的問題，例如內容超出螢幕、字體過小、可點擊元素距離太近等等。

Credits

window.devicePixelRatio
Using the viewport meta tag to control layout on mobile browsers