如果要讓行動裝置正常瀏覽網頁,可以另外製作手機版頁面或是透過自適應網頁設計(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 將不要的裝置設定移除,或更新其中的設定值。

值得一試的三個理由:

  1. 透過 Chrome 瀏覽器測試網頁在不同裝置螢幕大小的顯示情形
  2. 內建幾種常見的行動裝置和平板電腦尺寸,可依照需求自行新增
  3. 開放原始碼,相關檔案可以從 GitHub 找到