Gepiu的博客

有点想法很好,有点行动更好

树欲动...


Chrome开发者工具 - 设备模式(模拟移动设备)

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

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

简而言之

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

切换Device Mode(设备模式)

切换Device Mode(设备模式)来控制Device Mode(设备模式)的开和关。
Initial start for device mode
Device Mode(设备模式)打开时,图标为蓝色(设备模式开启)。
关闭时,图标为灰色(关闭设备模式)。
默认情况下启用Device Mode(设备模式)。
您也可以按Command+Shift+M(Mac) 或者Ctrl+Shift+M(Windows, Linux) 来切换设备模式。要使用此快捷方式,你的开发者工具窗口需要获取焦点。如果焦点您的可视窗口上,那么将触发Chrome的切换用户快捷方式

说明

翻译自:https://developers.google.com/web/tools/chrome-devtools/device-mode/