Google 推出免費工具 Resizer 測試網站在電腦、平板電腦及手機顯示效果

去年 Google Design 網站釋出一系列 Material Icons 免費圖示集，提供超過 900 個以上平面設計素材，讓開發者在進行開發時可直接取用精心設計品質優良的圖案。最近 Google 再推出一項免費工具 Resizer ，讓我們在電腦上測試網站於不同裝置解析度的顯示效果，這對於網頁開發者來說是相當實用的技巧，簡單來說，只要輸入網址，即可看到網站在不同畫面大小的顯示樣式。

如果你要開發網站，現今難度上已經降低不少，但要面對的另一項挑戰是如何在各種裝置正常顯示內容，除了電腦外，還包括移動裝置，例如：智慧型手機或平板電腦，要設計出在不同解析度、螢幕大小都能正確瀏覽的網站並不容易。

Google 提供免費工具 Resizer 能讓使用者直接線上即時測試，不用額外下載軟體，只要輸入檢測網址，就能得到電腦、平板電腦以及手機顯示效果，同時還能切換一些常用的螢幕解析度，或者測試在行動裝置直立、橫式的顯示狀況。

Google Resizer 跟微軟 Browser Screenshots 最大差異在於 Resizer 能真正模擬出網頁在不同裝置的實際運作情形，當然你也可以控制畫面，點選鏈結，跳換到不同頁面，或者拉開側邊欄選單等等，相較之下 Resizer 會更為實用（如果不是只想看擷圖的話）。

網站名稱：Resizer
網站鏈結：https://g.co/design/resizer

使用教學

STEP 1

開啟 Google Resizer 後，直接在上方輸入你要測試的網站鏈結，預設也提供 Google 部分網站來讓使用者進行實際操作，例如：Google Design、Material Design、Android。

STEP 2

接著就會看到網頁出現在 Resizer 中間，從右上角來切換電腦或手機（平板電腦）。

看到上方有一排類似尺的工具列嗎？這是在 Resizer 調整視窗寬度的功能，點選後就可快速切換一些寬度大小，同時網站也會立即變化。

STEP 3

切換到行動裝置後，預設有幾種寬度可以調整，例如：360、600、720 和 1024，寬度比較大的是將裝置橫放或平板電腦，從下圖可以發現免費資源網路社群選單在寬度過窄時會自動縮小，不會有擠出欄位或跑到其他行列的問題。

一樣可以測試網頁在平板電腦上直立、橫放的顯示效果。

不過 Google Resizer 工具僅在視窗大小上進行調整，並無法重設 User-Agent 來模擬行動裝置瀏覽器的顯示情形（例如行動裝置使用者應該會看到行動版網頁，但在 Resizer 只會看到一般網頁），若有類似需求，我會建議使用 Responsive Web Design Tester 直接在瀏覽器測試網站顯示效果，可能會來得更為準確。