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

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

警告:

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

简而言之

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

切换Device Mode(设备模式)

切换Device Mode(设备模式)来控制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/

results matching ""

    No results matching ""