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等