早期遇到行動裝置螢幕太小、無法正常瀏覽網站問題，都會針對 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」就能產生擷圖，每張圖片下方都會標示裝置名稱、解析度大小。
點選擷圖會開啟更大張的測試畫面，很容易檢查在某個螢幕大小是否能正確顯示，特別是中文內容和廣告都能正常出現於圖片中，對於要在自適應網頁設計進行除錯的開發者來說會有所助益。
值得一試的三個理由：
- 直接在線上測試網站在不同裝置解析度下的顯示效果
- 內建多種桌機、手機和 iPad 螢幕大小
- 可自訂要使用的尺寸，產生的擷圖可正常顯示中文
相關文章
- Responsive Screenshots 輸入網址查看網站在電腦及行動裝置顯示情形
- Screenshot Machine 將網頁畫面擷取轉為圖片或 PDF 免費工具
- everysize 輸入網址就能測試響應式網頁在各種裝置尺寸的顯示效果
- ILoveAdaptive 線上測試回應式網頁設計在不同裝置呈現效果
Ten articles before and after
PPT.CC 有圖（Yo2）有真相 – 網站快照服務，來幫網頁照張相吧！ – telegram 下載
關閉 macOS 和 iOS 動態效果，減少因動畫而造成視覺疲勞 – telegram 下載
FileZigZag 免費線上轉檔工具支援各種文件、圖片、電子書和影片音樂格式 – telegram 下載
Icecream Media Converter 免費影音轉檔軟體下載，支援多種常見影片、音訊格式（中文版） – telegram 下載
PhrozenSoft VirusTotal Uploader 免費線上掃毒工具，快速檢查檔案是否有惡意程式 – telegram 下載
ScreenLocker – 能將電腦暫時鎖住的螢幕鎖 – telegram 下載
ImageFly – 免費圖片上傳空間，上傳分享圖片還可賺美金！ – telegram 下載