行動網頁開發利用Chrome模擬器手機

開發行動版網頁時,常常需要找很多裝置模擬,不過Chrome其實就內建在裡面了!
未命名 - 2
進入 工具→開發人員工具

未命名 - 3

按下齒輪

未命名 - 2.1

General內的Appearance有 Show ‘Emulation’ view in console drawer

未命名 - 4

點選上面的console(或齒輪左邊的圖案),點Emulation就可以看到選項

未命名 - 5

點開後可以看到可以模擬許多裝置

未命名 - 7

按下Emulate後,就會看到畫面模擬成行動裝置的畫面了!

作者: 林壽山

林壽山 目前任職於軟體公司研究開發部門主管,主要採用.net core/.net 5/6 開發,收銀機pos系統開發,第三方支付設計(綠界、馬來西亞epay/happypay、台新one碼),金流設計,行動支付設計(悠遊卡/一卡通),支付寶,微信,街口支付,信用卡機(聯合信用卡),擅長PHP網頁設計(CodeIgniter、Laravel)框架、Delphi程式設計、資料庫設計、C# WinForm/WebForm程式設計、ASP.net MVC、LINE串接、API串接設計

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料