2016年2月24日 星期三

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


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

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

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



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




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

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

延伸閱讀相關文章:

 Resizer 

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


7 則留言 :

  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才能看到顯示

    回覆刪除

相關文章: