Chrome浏览器devtools使用系列二：模拟不同设备和视口

爱文Irwin

已于 2024-06-22 13:40:47 修改

阅读量1.3k

点赞数 9

分类专栏： Chrome devtools指南文章标签： chrome 前端

于 2024-06-20 22:04:52 首次发布

本文链接：https://blog.csdn.net/zzyp1927314/article/details/139842530

版权

3 篇文章 0 订阅

订阅专栏

本文讲解的版本信息如下，如果使用的版本和讲解的版本差距过大，可能会有不同的地方。

本

模拟PC设备

开发工具的左上角有一个小图标，默认不选中为PC环境，通过拉伸浏览器使得屏幕尺寸不同

默认情况下，设备工具栏会在视口中打开，并将尺寸设为自适应（Responsive）。可以在下拉列表中选择不同的手机

自适应视口模式可以自由编辑视口尺寸，并且可以通过视口右边和下边的位置自由拖拽视口大小。

点击右上角的三个点打开下拉菜单勾选【Show device pixel ratio】和【Show device type】可以显示窗口的DPR（物理分辨率和逻辑分辨率的比例）还有设备类型

PS：只有在自适应模式下，这些属性才能编辑。

一共有四种

选项	呈现方法	光标图标	触发的事件	滚动条
移动设备	移动设备	圆形	触控输入	手机滚动条样式
移动设备（无接触）	移动设备	常规	点击	手机滚动条样式
桌面设备	桌面设备	常规	点击	PC滚动条样式
桌面设备（触摸）	桌面设备	圆形	触控输入	PC滚动条样式

右上角菜单栏选择【Show rulers】

打开宽高标尺

需同时限制网络流量和 CPU 占用率，请从 Throttle 列表中选择 Mid-tier mobile 或 Low-end mobile。（PS：devtools中network和performance面板可以更详细的去设置这些）

Mid-tier Mobile 会模拟快速 3G 网络，并限制 CPU 速度，使其比普通性能慢 4 倍。

Low-end mobile 可模拟慢速 3G 网络，并将 CPU 节流速度限制在正常水平 6 倍。

Offline 则是没有网络。

右上角菜单栏选择【Show media queries】

现在，开发者工具在视口上方额外显示了两个条形：

在断点之间点击可更改视口的宽度，以便触发断点。

右键在显示的菜单中选择【Reveal in source code】可以快速定位到媒体查询对应的代码位置。

选择模拟真实的机器的话，尺寸，DPR等参数就无法更改了

PS：不同模拟设备的user-agent不同

IPHONE	'Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1'
三星	'Mozilla/5.0 (Linux; Android 13; Pixel 7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Mobile Safari/537.36'
PC	'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'