使用设备模式模拟移动设备

优质
小牛编辑
132浏览
2023-12-01

使用 Chrome 开发者工具的Device Mode(设备模式)来构建移动优先,完全响应式的网站。了解如何使用它来模拟各种设备及其功能。

警告: `Device Mode`(设备模式)可以近似估计您的网站在移动设备上的显示效果,但要获得完整的状况,你应该总是在真实的设备上测试你的网站。例如,DevTools无法模拟移动设备的性能特点。

简而言之

  • 在不同的屏幕尺寸和分辨率,包括Retina显示屏,上模拟您的网站。
  • 通过可视化和检查CSS媒体查询进行响应式设计。
  • 使用网络模拟器评估网站的性能,而不会影响其他标签的流量。
  • 准确地模拟触摸事件,地理位置和设备方向的设备输入。

切换Device Mode(设备模式)

切换Device Mode(设备模式)来控制Device Mode(设备模式)的开和关。

1551260279486067.png

Device Mode(设备模式)打开时,图标为蓝色()。

关闭时,图标为灰色()。

默认情况下启用Device Mode(设备模式)。

您也可以按Command+Shift+M(Mac) 或者Ctrl+Shift+M(Windows, Linux) 来切换设备模式。要使用此快捷方式,你的开发者工具窗口需要获取焦点。如果焦点您的可视窗口上,那么将触发Chrome的切换用户快捷方式。