1. 程式人生 > >chrome模擬手機客戶端模擬器使用方法

chrome模擬手機客戶端模擬器使用方法

手機站開發過程中,有些條件下我們無從知道開發的前端在不同手機上的展示,還好chrome為我們準備了非常好的工具,

這裡做下普及,大笑

首先,作為前端開發人員,用右鍵,用“審查元素” 檢視每個單元的原始碼情況。


點“sources”面板


然後再按“ESC”,看到如下視窗:


在“Device”後面的下拉框有一系列的裝置,基本上大部分主流的機型有了,但是國產機子很少,操他的美國佬。


選擇“Apple5”,能看到下圖:


下圖兩個按鍵“Emulate”和“reset”分別是進行模擬和取消模擬。


如果想要徹底關閉模擬器視窗,再按一次“ESC”即可。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

簡單說:

如何模擬手機裝置

PC上模擬手機的環境

需要Chrome瀏覽器版本在32以上

1、右鍵,審查元素

2、點選show drawer圖示(在小齒輪左邊),drawer意思是抽屜

3、開啟模擬功能:show ‘Emulation’ view in console drawer 確保前面的鉤鉤,

狀態

4、選擇你想要模擬的裝置,點選Emulate按鈕