Chrome自定义设备（自定义分辨率）设备分辨率设备、浏览器添加并启用设备、模拟屏幕、模拟分辨率、模拟设备

在 Chrome 开发者工具中添加并启用自定义设备，可以帮助你模拟不同分辨率的屏幕，以便在开发过程中测试网页在各种设备上的展示效果。以下是详细的步骤指南：

1. 打开 Chrome 开发者工具

- 快捷键

• Windows/Linux: Ctrl + Shift + I 或 F12
• macOS: Cmd + Option + I

- 通过菜单

1. 点击右上角的三点菜单（⋮）。

2. 选择 更多工具 > 开发者工具。

2. 切换到设备模式

- 在开发者工具界面，点击设置，点击左边的 设备 图标（一个手机和平板的图标）

3. 添加自定义设备

- 点击 添加自定义设备。

- 填写设备的详细信息：

• 设备名称：为你的自定义设备命名，例如 “Ultra HD Monitor”。
• 宽度 和 高度：输入目标屏幕的分辨率（例如，3840 x 2160）。
• 设备像素比（Device Pixel Ratio）：根据需要设置，通常 1 或 2。
• 用户代理字符串（User Agent String）：可选，根据需要自定义。
  

- 填写完成后，点击 添加。

4. 启用并选择自定义设备

- 回到F12调试界面，点击“显示/隐藏设备工具栏”，快捷键 Ctrl + Shift +M

- 回到浏览器主页面，发现多了这一排

- 点击“尺寸”，在设备下拉菜单中，选择你刚刚添加的自定义设备（例如，“Ultra HD Monitor”）。

- 页面将自动调整为你设定的分辨率，你现在可以在该分辨率下预览和测试你的网页。

5. 调整缩放比例（可选）

如果你的开发机器屏幕分辨率较小，可能需要调整缩放比例以便更好地查看页面内容。

- 在设备工具栏的右侧，有一个缩放比例选项（通常显示为百分比，如 100%）。

- 点击并选择适当的缩放比例，例如 50%，以便在较小的屏幕上查看更大的页面内容。

6. 保存设备设置（可选）

如果你希望在未来的开发过程中重复使用这些自定义设备，可以通过登录 Chrome 账户来同步设备设置，或者在不同的 Chrome 安装中手动添加。

7. 其他有用的设置

- 旋转屏幕：点击设备工具栏中的 旋转 按钮，可以在横屏和竖屏之间切换视图。

总结

通过以上步骤，你可以在 Chrome 开发者工具中添加并启用自定义设备，从而模拟各种高分辨率屏幕。

参考文章

电脑版chorme浏览器怎么切换到手机版