失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 使用chrome调试手机 平板 pc上各种浏览器上的页面

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

时间:2024-01-05 17:20:34

相关推荐

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

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

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

1、打开chrome(下面的步骤如果不成功,请先升级chrome浏览器),打开一个页面 如

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上各种浏览器上的页面》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。