设备模式

注意：Device Mode 可以让您了解您的网站在移动设备上的大致显示效果，但要获得全面的了解，则应始终在真实设备上测试您的网站。DevTools 无法模拟移动设备的性能特性。

设备模式为我们提供了如下的功能：

1. 添加自定义设备，当然也有内置的设备可供选择
2. 设置设备的状态和方向
3. 设置设备的像素比（DPR）
4. 设置设备的设备类型（Mobile、Desktop、Desktop with touch）
5. 设置网络类型（Online、Mid-tier mobile、Low-end mobile、Offline）
6. 显示标尺
7. 显示媒体查询

设备模式的一些限制，包括：

1. 无法模拟 GPU 和 CPU 行为
2. 无法模拟系统显示，如地址栏
3. 无法将原生显示（如<select>元素）作为模糊列表模拟

媒体查询栏

借助设备模式，我们可以调试我们的响应式网站。

可以通过彩色来辨别媒体查询：

1. 蓝色，针对最大宽度的查询
2. 绿色，针对一定范围内宽度的查询
3. 橙色，针对最小宽度的查询

我们还可以通过点击显示的媒体查询栏中的条形，调整设备的尺寸

右键点击某个条形并选择Reveal in Source Code，可以跳转到该CSS媒体查询在源代码中的定义。

模拟传感器

打开方式：

界面如下：

其中Geolocation是用于模拟地理定位的，Orientation是用于模拟加速度计的。

地理定位

该功能已经内置了一些地点，以供选择，我们也可以自定义模拟地理的经纬度。

Latitude是纬度的意思，Longitude是经度的意思。

相对应的JS API：navigator.geolocation

加速度计

该功能已经内置了一些操作，比如：

1. 正常放置
2. 上下颠倒
3. 横屏放置
4. 横屏左右颠倒
5. 平躺放置
6. 屏幕朝下平躺

当然也可以自定义方向参数：

1. α（alpha），围绕Z轴旋转
2. β（beta），左右倾斜
3. γ（gamma），前后倾斜

参考：

Device Mode
Test Responsive and Device-specific Viewports
Emulate Sensors: Geolocation & Accelerometer