重點整理
Responsive Viewer 是免費的 Chrome 擴充功能，能在同一個分頁裡並排顯示網站在手機、平板、桌機等多種螢幕尺寸的畫面，2026 年仍持續更新（1.1.25 版，約 40 萬使用者）。用法只有三步：從 Chrome 線上應用程式商店安裝、在要檢查的網頁點擴充功能圖示、在左側勾選要看的裝置。也能切換直橫向、調整縮放比例，或自行新增螢幕尺寸。
網站做好之後，最常被客戶回報的問題就是「手機上跑版」。但手邊不可能準備每一種手機和平板，Chrome 開發人員工具的裝置模式一次又只能看一種尺寸。Responsive Viewer 把多種裝置畫面排在同一頁，捲動和點擊會同步，改完一個版面就能一次確認各尺寸的效果。這篇示範安裝與使用步驟，並整理使用時要注意的地方。
Responsive Viewer 是什麼？
Responsive Viewer 是開放原始碼的 Chrome 擴充功能，開發者的目的就是讓前端工程師在開發響應式網站時，一次檢查多種螢幕。它內建 iPhone、Google Pixel、Samsung Galaxy、iPad 等常見裝置的尺寸，也能自行新增。依 Chrome 線上應用程式商店頁面（2026 年 10 月）的資訊，目前版本 1.1.25、2026 年 8 月更新，約 40 萬名使用者，介面為英文。
步驟一：安裝 Responsive Viewer
打開 Responsive Viewer 的 Chrome 線上應用程式商店頁面，點「加到 Chrome」，再按「新增擴充功能」。建議安裝後在擴充功能選單把它「固定」到工具列，之後比較好找。
步驟二：在要檢查的網頁開啟 Responsive Viewer
開啟要檢查的網站，點瀏覽器右上角「擴充功能」圖示中的 Responsive Viewer，就會開一個新分頁，以多裝置模式顯示這個網頁。
步驟三：挑選要看的螢幕尺寸
在左側裝置清單勾選想看的裝置，畫面會依序排出對應尺寸。檢查時建議至少涵蓋三種寬度：小手機（約 360–390px）、平板直式（約 768px）、一般筆電（約 1280–1440px）。
步驟四：調整縮放比例與直橫向
上方工具列可以調整整體的顯示比例，裝置多的時候縮小一點就能在同一個畫面看完；也可以把裝置切換成直式或橫向，檢查平板橫放時的版面。
步驟五：新增自訂螢幕尺寸
清單裡沒有的裝置，可以按上方工具列的「+」新增，輸入名稱與寬高即可。例如客戶反映某款手機跑版，就能把那款手機的尺寸加進來重現問題。
使用時要注意什麼？
- 它模擬的是「寬度」，不是真的手機：字型渲染、Safari 特有的問題、觸控行為和真機仍可能不同，重要頁面上線前還是要用真機檢查一次。
- 有些網站會拒絕被嵌入：設定了禁止被框架嵌入的網站，可能無法在 Responsive Viewer 中顯示。
- 需要登入的頁面：會用目前瀏覽器的登入狀態，例如檢查 WordPress 後台編輯中的頁面時，要先在同一個瀏覽器登入。
只想知道目前瀏覽器視窗的實際寬高，可以參考 How Big Is My Browser。
常見問題
Responsive Viewer 要付費嗎？
不用，Responsive Viewer 是免費的 Chrome 擴充功能，原始碼也公開在 GitHub 上，安裝後即可使用全部功能。
Responsive Viewer 有中文介面嗎？
沒有，介面是英文，但操作只有勾選裝置、調整比例、切換直橫向幾個按鈕，不懂英文也能使用。
不想裝擴充功能，還有什麼方法檢查 RWD？
可以用 Chrome 內建的開發人員工具：按 F12（Mac 是 Option + Command + I），點左上角的手機圖示切換裝置模式，再選擇裝置尺寸。缺點是一次只能看一種尺寸。
結語
Responsive Viewer 讓你在一個分頁裡同時看到網站在各種裝置上的樣子，設計師可以快速比對版面，網站管理員更新內容後也能一次確認手機、平板、桌機有沒有漏改。它是檢查 RWD 最省時的第一步，搭配上線前的真機測試，就能大幅減少「手機跑版」的回報。