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

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

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

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

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。

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

STEP 2

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

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

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

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

STEP 3

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

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

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

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

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

值得一試的三個理由:

  1. Google 推出自家 RWD 網頁測試工具,輸入網址即可使用
  2. 可測試網頁在電腦、平板電腦以及手機的顯示效果
  3. 內建多種解析度尺寸,可隨時切換即時預覽
分享本文