[TOC] ## 测试响应式设备视图 最新的设备模式（Chrome 49以后）是一套完整的移动设备优先的调试工具，是对主体功能的重要扩展。接下来，让我们一起学习如何应用设备模式来模拟不同的设备以及它们的响应特性。 ### 使用视图控制器  视图控制器提供两种模式用来测试你的移动网页 1. **响应式** 完全响应式 2. **特殊设备** 提供常见的几种设备，完全模拟所选设备视图特性 ### 响应式模式 我们推荐使用响应式模式作为默认的工作模式。在实际的开发过程中使用，能够使得开发的页面具备完全的响应特性，适配未知的以及未来的设备类型。 更多响应式模式的介绍，请见后文。 #### 定制视图大小 如下图，可以通过拖动左右下方的拖动条直接改变视图大小，或者通过输入的方式，输入更精细的值。  ### 特殊设备模式 我们一般提倡，在项目开发的末期，使用特殊设备模式，用来检视网页在某些特殊设备上的展现。 #### 内置的设备预置 设备模式内置提供了几乎所有常见的设备类型，可在设备下拉列表中选择。选择后，相应的预置属性会自动模拟相应的设备： * 设置正确的“User Agent" * 设置正确的分辨率和DPI * 模拟触摸事件 * 模拟移动设备滚动条以及视图 * 自动调整文本大小  #### 自定义设备预置 设备模式允许你添加自定义的设备进行模拟，用于那些没有被覆盖到的边缘设备。 通过如下步骤进行 1. 打开谷歌开发者工具设置页面 2. 点击**设备**标签页 3. 点击**添加设备**摁钮 4. 填入设备名、宽、高、设备像素比和UA字符串 5. 点击**添加** 现在你的设备就在设备下拉菜单中了  #### 设备状态和方向  如上图，当在特定设备模拟时，会有一个切换摁钮用于切换移动设备的横向和竖向模式。 当然，摁钮并不止切换方向这么简单，对于支持更多模式的设备类型如Nexus 5X，点击后，会弹出一个下拉菜单，用于选择各种展示模式。  #### 缩放 有些时候，设备分辨率太大， 浏览器窗口不足以显示所有内容，此时，缩放功能会解决这个问题。 1. **适应窗口** 会自己将设备缩放至可显示的最大空间 2. **百分比** 设备显示的缩放比例  ### 可选的控件 可选的控件通过设备模式右上角三个点的摁钮进行添加或者修改。  #### 设备像素比 如果你在非Retina环境下模拟Retina设备，或者在Retina环境下模拟非Retina设备，你需要调整**设备像素比**。设备像素比是设备物理像素和逻辑像素之间的比值。在具备Retina显示的设备下，譬如Nexus 6P，具备更高的像素密度，进而影响可视范围的锐度和大小。 网页上会受设备像素比影响的地方有： * 媒体查询 譬如 ``@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }`` * CSS中关于图片的一些设置 * ``window.devicePixelRatio``的值 对于一台原生的Retina显示屏，你会发现DPI太低看起来像素化，而太高会比较尖锐。在标准的Retina显示器上，将DPR设置成2，通过缩放视图大小来模拟这些效果。 #### 媒体查询 [媒体查询](https://developers.google.cn/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries)是响应式网页设计的核心思想。  在可选控件下拉菜单中，选中**显示媒体查询**选项，谷歌开发者工具会在层叠样式表中检查媒体查询，并且在视窗顶部用不同的颜色展示出来。  不同颜色的含义为：  点击媒体查询颜色条，会自动调整为相应屏幕尺寸，方便预览相应尺寸下的样式。 右击能够显示媒体查询被定义的位置，并且可以跳转到相应源码的位置。如下图  #### 标尺  ### 局限性 * GPU 和 CPU不能模拟 * 系统显示不能模拟 * 某些依赖真实设备的特性不能模拟 * …… 尽管设备有这些局限性，但设备模式的功能已经强大到满足绝大部分的需求。如果你需要在真实设备上测试，你可以通过[远程调试技术](247129)获取更多的信息。