[Chrome] 修改 Device metrics 變成各種大小的畫面,讓你模擬 Android、iPhone 等螢幕尺寸!

其實我們在之前那篇 [Chrome] 修改 User Agent 偽裝不同的瀏覽器,讓你模擬 Android、iPhone 等等! 就有介紹在 Chrome  的「開發人員工具」裡面的 Overrides(重定義)功能,不過上次只介紹了偽裝瀏覽器的功能而已,今天就把剩下的幾個功能簡單介紹一下吧!


在「開發人員工具」右下角有個小齒輪點一下可以跳出設定視窗然後點選「Overrides」


「Device metrics」打勾之後,透過選擇上面的「User Agent」就可以輕鬆調整想模擬的手機螢幕尺寸囉!

很適合在設計 RWD 時使用,像我之前再用 Bootstrap 的時候就常常這樣調整呢。
不過你可能會覺得怎麼比手機實際大小差那麼多,如果要跟實際大小一樣只要打勾「Fit in window]就可以了,不過你在手機上看到的應該是沒有勾的樣子

如果想要在網頁中測試觸控的話只要把右邊的「Emulate touch events」打勾就可以囉,你的鼠標應該會變成一個小灰點,然後就可以測試滑動功能了

底下網頁可以測試滑動功能:(其實本來想內遷,可是貌似js被吃掉了...)
http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

不過一切測試最好還是乖乖掏出手機來測試最準了 XD

本月最夯