Google 推出免費工具 Resizer 測試RWD網頁設計效果


Google 為了輔助開發者製作「 Material Design 」介面,推出過很多免費網頁設計資源,例如提供大量免費下載的「 ICON 圖示」,而且這些 Google 分享的 ICON 還偶爾會更新,目前已經累積到 900 多個免費圖示。

最近, Google 又推出了一個免費的網頁設計輔助小工具:「 Resizer 」,顧名思義,它的用途是幫你測試一個網頁在不同大小螢幕上的顯示效果。

「 Resizer 」特別針對 RWD 響應式網頁設計,你只要把網頁網址輸入線上工具「 Resizer 」,就會顯示出電腦、平板、手機上的網頁顯示樣貌,還能進一步根據想要查看的螢幕解析度做測試,幫助開發者與設計師快速了解自己的 RWD 網頁是否有問題。



進入 Google 的「 Resizer 」網站,只要把想測試的網頁網址輸入在上方欄位,就會在下方立即看到不同螢幕下的網頁顯示效果,看看你的 RWD 網頁設計有沒有跑版。




更進一步的,你還可以點擊右上方的電腦、手機按鈕進入更細緻的螢幕測試,調整更多不同的解析度細節,看看網頁自動適應的成果。

Google 的「 Resizer 」不需要安裝外掛、不需要書籤小工具,也不會干擾你的瀏覽器視窗大小,他直接用網頁內建的虛擬螢幕,讓你看到網頁在不同螢幕中的顯示效果,或許這對網頁設計者來說是個有用快速的檢查工具。

延伸閱讀相關文章:

 Resizer 

轉貼本文時禁止修改,禁止商業使用,並且必須註明來自電腦玩物原創作者 esor huang(異塵行者),及附上原文連結:


留言

  1. 輸入 www.google.com 會顯示 The resizer is having trouble loading this URL.

    回覆刪除
    回覆
    1. 輸入 facebook 也無法讀,不知道限制是什麼

      刪除
    2. 也許是因為該網站的 x-frame-options 選項導致無法載入?

      刪除
    3. 應該是那些網站不允許在iframe中開啟

      刪除
  2. 作者已經移除這則留言。

    回覆刪除
  3. 倘輸入谷歌網址沒問題,至於臉書應該是 FB.com/about才能看到顯示

    回覆刪除
  4. 倘輸入谷歌網址沒問題,至於臉書應該是 FB.com/about才能看到顯示

    回覆刪除

張貼留言

相關文章:

這個網誌中的熱門文章

首席測速照相 Android iOS App 幫 Google 地圖加路況超速語音

像個專家活用 Google 地圖 App :13 個你可能還不知道的技巧

Google 簡報更接近取代專業簡報軟體了嗎?別錯過今天6個更新

Google Drive 雲端硬碟檔案串流:不佔空間更高效率的新制教學

OpenShot 免費中文版影片剪輯軟體,何必用精簡版的威力導演

[筆記術-12] 主題樹狀筆記法:上課讀書筆記第一次寫就有條理

5個台灣老照片圖庫,歷史教學研究必備的免費歷史照片資料庫

YouTube 內建看影片學英文字幕機:還可中英對照、單句複習

全新 Google 日曆網頁版實測:改良月曆介面,還有新行程功能

Google Maps 我的地圖完全教學!規劃自助旅行攻略