Responsive Screenshots 輸入網址查看網站在電腦及行動裝置顯示情形

記得幾年前架設 WordPress 網站時，會透過行動版外掛功能來打造更適合手機或平板電腦閱讀的環境，這個作法通常是將手機使用者引導至另一個佈景主題，專為行動裝置特別設計，無論在網頁大小或載入速度上都會比桌面版更適合行動裝置使用者閱讀。雖然看起來是個很不錯的解決方案，但其實也會出現一些問題，例如：不一定適合所有螢幕大小的行動裝置、必須維護兩個不同的佈景主題等等，因此後來趨勢就逐漸轉為使用「自適應網頁設計」（Responsive Web Design）替代。

那什麼是自適應網頁設計呢？簡單來說，它可以依照不同螢幕大小，自動調整網頁佈局，例如螢幕寬度足夠時顯示側邊欄，不足的話側邊欄就自動隱藏或移動至下方，這麼做的好處是不用額外維護另一個網頁佈景主題，那麼如果正在開發自適應網頁設計版型，要怎麼知道它在不同裝置的顯示樣式呢？

本文要介紹的「Responsive Screenshots」是一款用來檢視自適應設計的免費線上工具，只要輸入檢測網址，即可預覽網站在 iMac、Macbook、iPad 及 iPhone 下的顯示情形，或是切換特定尺寸的電腦或行動裝置，也能將產生的擷圖下載保存。

比較可惜的是 Responsive Screenshots 不支援中文顯示，中文字在圖片上可能無法完整出現，但這個工具主要用意是查看網頁整體的版型或樣式，即使無法顯示中文也不影響它的可用性，只是擷取的圖片沒那麼好看。

網站名稱：Responsive Screenshots
網站鏈結：https://responsive-screenshots.com/

使用教學

STEP 1

開啟 Responsive Screenshots 網站後，可以看到一個網址列及四個預設裝置，預設情況下會在 iMac 27、Macbook Pro 15、iPad 及 iPhone X 下測試網頁的顯示樣式情形。

STEP 2

如果有特殊需求，也可以從下方裝置部分點擊、選擇其他同類產品，例如 Macbook 也可以選 13 吋或 Macbook Air 等不同產品線。

桌上型電腦除了 iMac 27 外，也有 iMac 21.5 及 Apple Thunderbolt 螢幕。

STEP 3

輸入網址後，點擊右側的「Grab Shots」按鈕來獲取擷取畫面，網頁會提示你可能會耗費 5-10 秒鐘時間，取決於你測試的網頁大小而定，在結束前請先不要關閉網頁。

STEP 4

測試完成後 Responsive Screenshots 會顯示網頁在不同螢幕大小的裝置呈現出來的效果，如同前面所說，有些使用 RWD 的頁面當整體寬度足夠時才會顯示選單及側邊欄，若寬度不足（例如使用平板電腦或手機）就會隱藏選單及側邊欄，讓有限的空間可以被更有效率應用，也更能符合各種螢幕大小閱讀。

如果你想看更大張的擷取畫面，Responsive Screenshots 網頁最下方能下載 JPEG 格式擷圖，也能點擊「Download ZIP」批次下載所有測試結果。不過真的很可惜的是中文無法正確顯示，不然就更值得中文網站使用了。