RWD 測試工具 - Google Resizer

:) RWD 入門原則系列

RWD 已是現代網頁的基本設計原則,網路隨處都能取得支援 RWD 網頁檢視的測試工具,例如 DesignmodoResponsinatorFirefox 與 Chrome 內建相關的 RWD 檢視功能等等,Google 提供的線上工具 Resizer 亦是不錯的選擇。

Resizer 的網址 http://design.google.com/resizer/



進入 Resizer 網站之後,於中央上方的文字方塊中輸入欲測試網址就會看到網頁在不同尺寸下的呈現效果,以 http://www.android.com 網頁為例,你可以看到在不同尺寸螢幕上呈現的效果。



如果想要檢視特定尺寸,可以按一下右上角的圖示,例如手機,出現以下的畫面。



Resizer 同時提供了各種媒體查詢斷點方便開發人員切換檢視,只要點選畫面上方的斷點即可呈現此種尺寸下的畫面。



要注意的是如果網站不支援 iframe 嵌入的話,Resizer 便無法顯示,例如 Amazon 網站。




:) RWD 入門原則系列


沒有留言: