Responsive Viewer 是一款免費的響應式網頁檢視器，提供多種主流裝置，包括蘋果 iPhone、iPad、iMac、Google Pixel、三星 Galaxy 等，讓使用者同時查看網頁在不同螢幕尺寸上的顯示效果，方便測試響應式網頁是否正常。這項工具有擴充功能和線上版本，兩者皆可免費使用。


使用 Responsive Viewer 線上版本無須安裝，輸入目標網址即可在不同裝置的瀏覽框架中檢視網頁，可以自選裝置螢幕、縮放比例、旋轉方向，並在模擬器中測試點擊與捲動等操作。不過，線上版本有部分功能無法執行，透過 Responsive Viewer 擴充功能檢視網頁，還可同步點擊、捲動和保存截圖。

名稱：Responsive Viewer
語言：英文
網址：https://try.responsiveviewer.org/
擴充功能：【Chrome 線上商店】

Responsive Viewer 使用說明：

1. 開啟 Responsive Viewer 網站，會先提醒安裝擴充功能可解鎖完整功能，接著會有功能導覽，按下「X」關閉畫面進入檢視器。


2. 在檢視器的左上方(或中間處)輸入目標網址載入網頁。(註：第一次使用可能離開網站前往目標網頁，重新打開 Responsive Viewer 就會看到瀏覽框架。)


3. 預設會模擬 iPhone、Pixel、iPad、Macbook 等五種裝置的螢幕尺寸，點擊「裝置」按鈕可以選擇(添加或移除)裝置。


4. 使用者可以從工具列自訂檢視畫面，例如點擊「數字」按鈕會展開縮放比例選項。


5. 點擊「Toggle Mockups」會顯示/隱藏裝置外框，不過並非所有裝置都有外框。


6. 如果想要測試網頁功能，點擊「≡ ＞ Preferences 」打開「show screen scrollbars」選項，就能在每個裝置中捲動網頁和點擊按鈕。


7. 在測試網頁時可以選擇 Single scree 僅顯示一部裝置，以及旋轉螢幕方向進行體驗。


補充：
Responsive Viewer 線上版本的 sync click、sync scroll (同步點擊、捲動)和截圖功能，筆者操作時沒有任何反應，改用擴充功能皆可正常執行。

延伸閱讀：