Chrome調試手機頁面

使用chrome調試手機,平板,pc上多種瀏覽器的頁面展現

做爲web開發者，特別是現代web開發者，是否要調試手機，平板，電腦上的顯示效果？chrome自帶了這種很強大的神器

一、打開chrome（下面的步驟若是不成功，請先升級chrome瀏覽器）,打開一個頁面 如http://www.baidu.com
二、按F12打開Developer Tools,以後點擊developer Tools右下角的設置icon,如圖

三、點擊設置icon後，就會看到彈出一個新的界面，以下圖:

四、在上圖所示界面點擊相應選項，刷新頁面就能看到chrome使用對應設備上的相應瀏覽器渲染該頁面，下圖展現了chrome能夠模擬的設備：

五、下面講下該工具每一個功能項的意思
User Agent : 設置用戶代理，告訴瀏覽器模擬何種設備中的哪一個瀏覽器
Device metrices: 選擇後，會根據User Agent設置頁面的大小，默認值是模擬設置的大小，
Fit in window ：點選後，頁面大小會根據窗口大小進行適配
Override Geolocation：手動設置經緯度，選擇後能夠輸入經度和緯度的值 Emulate position unavailable用來開關是否能夠使用地理位置
Override Device Orientation：設置設備方向，
Emulate touch events：模擬觸摸屏事件
Emulate CSS media：模擬css 樣式屏幕如 print screen tv等