使用chrome调试手机,平板,pc上各种浏览器上的页面

使用chrome调试手机,平板,pc上多种浏览器的页面展示

作为web开发者，特别是现代web开发者，是否要调试手机，平板，电脑上的显示效果？chrome自带了这种很强大的神器

1、打开chrome（下面的步骤如果不成功，请先升级chrome浏览器）,打开一个页面 如http://www.baidu.com

2、按F12打开Developer Tools,之后点击developer Tools右下角的设置icon,如图





3、点击设置icon后，就会看到弹出一个新的界面，如下图:





4、在上图所示界面点击相应选项，刷新页面就能看到chrome使用对应设备上的相应浏览器渲染该页面，下图展示了chrome可以模拟的设备：





5、下面讲下该工具每个功能项的意思

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等

本文标题：使用chrome调试手机,平板,pc上各种浏览器上的页面

本文链接：http://xiandanboke.com.cn/?p=980转载请注明转自咸蛋博客