前端設計的好幫手，Web Responsive Design Tool 模擬各行動裝置解析度的顯示畫面

記得我們在這禮拜才介紹過的「[Chrome] 修改 Device metrics 變成各種大小的畫面，讓你模擬 Android、iPhone 等螢幕尺寸！」嗎？

隨著智慧型裝置愈來愈普及，網頁己不再只限於電腦中瀏覽，而要讓網頁能符合各行動裝置的螢幕上來顯示，所以要不專門為行動裝置設計 Mobile 版，就是要考慮 RWD 的問題...

不管怎樣，依照不同的解析範圍，要顯示不同的畫面，在設計的時候就必須常常檢測在不同的螢幕大寫解析時會不會發生錯誤，市面上螢幕尺寸那麼多，一個人很難實際擁有所有的尺寸來測試，如果覺得之前介紹史的方法還是太麻煩就趕緊來試試看這個網站吧！

不用安裝任何的外掛，可跨各瀏覽器，模擬出各裝置的解析大小，並呈現出畫面的顯示效果，來檢測是否有跑版或位移等問題

• 網站名稱：Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions - Best developer device testing toolbar
• 官方網站：http://lab.maltewassermann.com/viewport-resizer/
• 系統支援：Except IE（？）
• 網頁工具：↔ Resizer

不過在實際測試時網頁並沒有偵測到 User Agent 並切換到 Mobile 版網頁，所以這個工具大概比較適合要處理 RWD 的設計者吧。


使用之後上面會跑出一條工具列可以選擇你要模擬的螢幕大小

像是 iPhone 的螢幕

也有 iPhone5 的螢幕，比較長一點點呵呵

也有小平板（Small Tablet: Size: 600x800）

比較大的平板（iPad2）

寬螢幕～

Full HD 尺寸！

當然如果都不喜歡也可以自己調整，按下右邊的「i」可以看到資訊

忘了告訴你，如果想要把螢幕打橫不用真的去轉螢幕或歪頭，圖示按第二下就是橫的了！

另外在右邊有重新逞裡的按鈕，可以重新載入在檢視的網站，不用自己按 F5 重複開喔～