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

早期遇到行動裝置螢幕太小、無法正常瀏覽網站問題，都會針對 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」就能產生擷圖，每張圖片下方都會標示裝置名稱、解析度大小。

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