Responsive Viewer 在單一頁面查看網頁在不同螢幕大小裝置的顯示樣貌（Chrome 擴充功能）

如果要讓行動裝置正常瀏覽網頁，可以另外製作手機版頁面或是透過自適應網頁設計（Responsive Web Design，簡稱 RWD）技術來調整版型，那麼要怎麼知道一個網站有沒有支援 RWD 呢？最簡單的方法就是拖曳調整視窗大小，看看網頁是不是在寬度較窄時仍可正常顯示，例如選單可能會縮起變成點選後才展開的按鈕。大部分的開發者都會使用行動裝置測試版型，但每個裝置大小都有差異，若沒辦法同時擁有這麼多裝置進行測試，其實透過一些電腦上的工具也能達到相同效果。

本文要介紹的「Responsive Viewer」是一個免費 Chrome 擴充功能，可以在一個畫面中測試網站在多種螢幕大小的顯示效果，內建幾種智慧型手機、平板電腦的解析度大小，例如 Apple iPhone、Google Pixel、Samsung Galaxy 和更大的平板電腦尺寸，使用者還能依照需求自行新增裝置，透過 Responsive Viewer 就能實測在特定螢幕的網頁顯示情形，亦可調整直式或橫向顯示。

此外，對於會依照裝置類型切換到特定網頁版本的網站來說，Responsive Viewer 也能自訂 User Agent，可以模擬為行動裝置，若要測試行動版網頁也很有用，在國外討論區提到類似的服務是要付費的，但使用 Responsive Viewer 這樣的開放原始碼工具取代付費工具也沒什麼不行，對開發者來說是個很實用的網站測試工具。

擴充功能資訊

元件名稱：Responsive Viewer
適用平台：Chrome
程式語系：英文
安裝頁面：從 Chrome 線上應用程式商店下載（GitHub）

使用教學

STEP 1

開啟 Responsive Viewer 的 Chrome 線上應用程式商店頁面，點選「加到 Chrome」就能下載、安裝擴充功能。

STEP 2

找到要測試的網站分頁，按下 Responsive Viewer 按鈕會開啟工具，就能看到在不同裝置大小的實際顯示情形，這個工具是實際顯示網頁而且可以操作，跟一些只能產生縮圖的線上服務不同。

STEP 3

從左下角調整要顯示的百分比大小，也能將螢幕切換為直式或橫向顯示。

如果要測試螢幕尺寸較大的平板電腦，或是有加入自訂的解析度，可以將顯示方式調整為橫向，對於要查看顯示結果來說會更有幫助。

STEP 4

預設情況下有 iPhone 8 Plus、iPhone 8、iPhone XR、iPhone XS、Galaxy 等等不同尺寸大小的行動裝置可以測試，點選最前面的眼睛圖示調整是否要顯示這個裝置大小，利用第二個按鈕調整順序。

設定後點選左上角的「選單」讓側邊欄隱藏，就能查看不同裝置的同一頁面顯示情形，如果要切換不同網頁可以在上方「網址列」輸入網址，送出後就會顯示於底下代表不同裝置的視窗中。

STEP 5

在 Responsive Viewer 找不到你要的裝置沒關係，點選右上角「+」可以新增裝置，設定裝置名稱、尺寸大小（長寬）和 User Agent 後點選「Add Screen」就能加入側邊欄，光是這個功能就可以讓 Responsive Viewer 更有彈性，也能做為檢查網站在不同螢幕大小顯示樣貌的測試工具。

如果有一些內建的裝置你用不到，或是不想讓它顯示，點選兩下，會跳出更新畫面，一樣可以點選 DELETE 將不要的裝置設定移除，或更新其中的設定值。