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

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

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

Slack 完整教學與上手心得:找到正確的團隊溝通之道

Google NotebookLM 免費中文 AI 筆記實例教學,老師、學生、創作者利器

畫張圖說得更清楚! Napkin 用 AI 幫你的簡報文章手繪視覺思考圖

Google 表單自動關閉回覆教學:時間人數到達就過期

會議記錄不麻煩!我常用兩個 Evernote AI 功能整理錄音、手寫筆記

Excalidraw 免費 AI 生成流程圖,一鍵畫出知識圖表、專案流程、寫作大綱

微軟 Bing AI 繪圖工具 Image Creator 免費開放,30秒輕鬆生成圖片

Miro 遠距工作開視覺會議的免費強大白板,專案圖解實例教學