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

[複製鏈接]

ai1118

468 主題	0 好友	522 積分

高級會員

Rank: 4

UID: 70473
帖子: 471
主題: 468
精華: 0
積分: 522
楓幣: 738
威望: 521
存款: 0
贊助金額: 0
推廣: 0
ＧＰ: 43
閱讀權限: 50
性別: 保密
在線時間: 28 小時
註冊時間: 2014-7-14
最後登入: 2015-5-16

發消息

電梯直達

1樓

發表於 2014-7-14 09:33:57 |只看該作者 |倒序瀏覽

在「開發人員工具」右下角有個小齒輪 2013-04-25_200044

點一下可以跳出設定視窗然後點選「Overrides」

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

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

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

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

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

[size=100%]來源: knowlet3389.blogspot.tw

Android, iPhone