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

最後更新於 2020 年 07 月 07 日

如果要讓行動裝置正常瀏覽網頁,可以另外製作手機版頁面或是透過自適應網頁設計(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 找到

 

相關的文章

everysize 輸入網址就能測試響應式網頁在各種裝置尺寸的顯示效果

現在很多人是透過智慧型手機或平板電腦瀏覽網頁,在網頁設計上就要考量到如何讓不同尺寸螢幕大小也能正常顯示,以往會製作成電腦版和手機版兩種格式,後來多半以響應式網頁設計(Responsive web design)技術直接在不同尺寸螢幕上顯示最適合的樣式,更重要的是可以節省維護的成本和時間。想測試自適應設計在各種裝置顯示情形,除了直接使用手機瀏覽外,其實也有不少工具可以輔助,像是 Responsive Viewer、ScreenDump 或是 Responsive Screenshots。

Screenshot Tracker 擷取並追蹤網頁長截圖,測試在不同裝置顯示情形

網站開發者經常需要測試網頁在不同裝置、螢幕大小的顯示樣貌,以前會針對行動裝置另外製作一個行動版,現在比較普遍作法是使用響應式網頁設計(Responsive web design,簡稱 RWD),可自動調整為最適合閱讀的大小,但這些開發過程可能都得借助於測試工具幫忙,例如瀏覽器外掛程式 Responsive Viewer 可在單一頁面查看不同螢幕大小裝置的顯示樣式,或是透過線上工具 ScreenDump 預覽網站在不同尺寸螢幕顯示效果。

無痛轉移!微軟 Microsoft Edge 瀏覽器安裝 Chrome 擴充功能教學

年初微軟推出全新 Microsoft Edge 瀏覽器,雖然名稱沿用之前的 Edge,卻是將整個瀏覽器砍掉重練,直接以 Chromium 做為核心,也和 Google Chrome 一樣有著非常好的速度、安全性和穩定度,更重要的是也能使用 Chrome 龐大的擴充功能!雖然 Microsoft Edge 預設安裝擴充功能會連接到 Microsoft Store,如果你要使用的外掛只有在 Chrome 線上應用程式商店上架,只要設定一下也能回到熟悉的商店安裝瀏覽器擴充功能。

Google Search Ads Highlighter 為搜尋結果的廣告加入不同背景色效果(Chrome 擴充功能)

Google 去年在行動搜尋上推出新的樣式,最主要的外觀差異就是將網站的品牌往上移動,並將網站名稱及網站圖示(favicon)顯示於搜尋結果上方,聲稱能幫助使用者更了解資訊來源和要尋找的頁面。今年一月 Google 決定將這個更新推送到桌面版搜尋,但引來不少使用者反彈,例如搜尋結果混雜著網站標誌看起來非常凌亂,而且顯示於頂部的廣告因為標誌變小很容易引起誤點(被誤認為是一般搜尋結果),後來在十天左右就緊急將網站標誌拿掉,並決定進行新的實驗以找出更適合放置網站圖示的位置。

在 Google 搜尋結果加入切換不同國家語言的選項(Chrome 擴充功能)

現今搜尋資料時大家一定會先去求助 Google 大神,如果撇開隱私不說,Google 搜尋引擎確實能找到非常多的結果,而且內容相當準確,這當中存在很多技術,例如 Google 會依照使用者來源國家和使用語言等等顯示出最適合的搜尋結果,畢竟它強調的是解決問題,與其說是給使用者相關結果更不如說是提供解答。不過另一方面也就表示搜尋結果會受限於個人化,若沒有透過一些選項調整很難找到其他國家語言的搜尋結果。

回應