ScreenDump 自適應網頁設計測試工具,預覽網站在不同尺寸螢幕顯示效果

最後更新於 2020 年 07 月 07 日

早期遇到行動裝置螢幕太小、無法正常瀏覽網站問題,都會針對 User Agent 提供不同的頁面版本,例如在手機存取時會直接切換到「行動版」網頁,若以電腦開啟則是跳轉一般網頁,這麼做的好處是一般行動裝置會使用速度較慢的行動網路,行動版就能盡量減少網頁大小,讓瀏覽者有更好的使用體驗,不過缺點也顯而易見,就是得同時維護網頁不同版本,無形間增加更多時間成本。

後來自適應網頁設計(RWD)就逐漸成為主流,簡單來說,透過自適應網頁設計可以在不同尺寸大小的螢幕上正確顯示網頁排版,也就是會針對螢幕寬度,自動調整為最適合的樣式。好處是可以克服不同裝置螢幕大小的問題,而且只要一個網頁版本就能做到,尤其現在各家廠牌都做不一樣的尺寸,RWD 是更簡單可靠的解決方案。

本文要介紹的ScreenDump」是一個用來測試自適應網頁設計的免費工具,只要輸入檢測網址,勾選要查看的裝置或螢幕尺寸,線上產生在不同大小裝置顯示樣式,也能檢查看看自適應設計會不會發生問題。

不過就跟一般的線上工具一樣,ScreenDump 只能產生網頁擷圖,無法針對網頁進行實際操作,如果發現問題,依然得透過其他方式找出問題癥結,其實瀏覽器內建的開發工具也能達到類似效果,但相較之下 ScreenDump 顯得更為簡單快速,勾選要測試的尺寸大小,遠端就能產生畫面擷圖。

ScreenDump
https://screendump.techulus.com/

使用教學

STEP 1

開啟 ScreenDump 後,輸入你的網站網址,下方有兩個選項可以選擇性勾選:

  • 在擷取畫面前加入五秒鐘的延遲時間(此選項可以讓網頁載入更完整)。
  • 擷取從頭到尾完整的網頁擷圖。

STEP 2

勾選要測試的畫面尺寸大小,分為桌機、行動裝置和 iPad,裝置後方會標示該螢幕的解析度。

如果你想測試的裝置或尺寸大小沒有列在其中,點選「Add Custom Device」可以新增自訂裝置,設定裝置名稱、螢幕寬度、螢幕高度,若需要也能自訂 User Agent 進行特定模式下的測試。

STEP 3

按下「Submit」就能產生擷圖,每張圖片下方都會標示裝置名稱、解析度大小。

點選擷圖會開啟更大張的測試畫面,很容易檢查在某個螢幕大小是否能正確顯示,特別是中文內容和廣告都能正常出現於圖片中,對於要在自適應網頁設計進行除錯的開發者來說會有所助益。

值得一試的三個理由:

  1. 直接在線上測試網站在不同裝置解析度下的顯示效果
  2. 內建多種桌機、手機和 iPad 螢幕大小
  3. 可自訂要使用的尺寸,產生的擷圖可正常顯示中文

 

相關的文章

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

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

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

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

Screenshot Machine 將網頁畫面擷取轉為圖片或 PDF 免費工具

免費資源網路社群介紹過不少製作、產生網頁擷圖的線上工具,這些服務多半不需要額外下載軟體,輸入網址就能建立網頁截圖,有些還能選擇要用的裝置類型或解析度大小,對於檢查自適應網頁設計(Responsive Web Design)網站呈現效果來說會很有用,有時候也可能用來備份網頁內容,像是 Web-Capture 線上網頁快照服務輸入網址就能完整擷取網頁轉圖片,或是 Screenshot Guru、Full Page Screen Capture 都能透過瀏覽器建立網頁擷圖。

httpstatus.io 快速檢查網站狀態碼、回應標頭和重新轉向情形

自行架站會遇到各式各樣的狀況,其中很常發生的是要檢查某項功能有沒有正常運作(舉例來說,在 WordPress 網站使用 Cloudflare 外掛建立快取),除了檢查網頁原始碼,大多會透過瀏覽器內建的「開發人員工具」進行各項除錯工作,查看一個網頁究竟載入多少元件檔案,也會檢查相關檔案在使用時從伺服器端回傳的「Response Headers」,這些看起來複雜的資訊代表著某個文件是如何被載入使用,也能找出拖慢網頁速度的原因。

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

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

Sprints 在 Mac 實現番茄鐘工作法,在工具列顯示倒數計時功能

大家一定聽過很有名的「番茄鐘工作法」(Pomodoro Technique),這是一種時間管理法,可以讓我們更專注於眼前的工作,對於像我這種很習慣拖延、無法當下專心把事情做完的人來說特別有用,簡單來說,它的實踐方式是先決定一件你要進行的工作,將番茄工作法的計時器設定 25 分鐘,在這時間裡就只專心做同一件事情,時間過後用 5 分鐘時間專心休息,並再以 25 分鐘為單位重新開始,四個循環後就進行一個較長時間(10-15 分鐘)休息。

回應