Gepiu的博客

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

树欲动...


Chrome开发者工具 - 设备模式(测试响应和设备特定可视窗口)

测试响应和设备特定可视窗口

更新后的Device Mode(设备模式)(从Chrome 49开始)是现在“移动优先”开发工具的一个组成部分,并扩展了主要的DevTools 工具条。了解如何使用其控件来模拟各种设备或完全响应式。

TL;DR

  • 使用 Device Mode (设备模式)的屏幕模拟器测试你的网站的响应式布局。
  • 保存自定义预设,以便以后轻松访问它们。
  • 设备模式不能完全代替真实设备的测试。 注意其局限性。

使用可视窗口控件

device mode enabled
Viewport Controls(可视窗口控件)允许你针对各种设备测试您的网站,以及完全响应式。 它有两种模式:

  • Responsive (响应式) - 通过任意任何一个调节手柄自由调整可视窗口大小。
  • Specific Device (指定设备) - 将可视窗口锁定在特定设备的确切可视窗口大小,并模拟某些设备特征。

Responsive Mode(响应式模式)

我们建议使用Responsive Mode(响应式模式)作为默认工作模式。在你网站和应用程序的开发期间使用它,并经常调整视口的大小,以创建一个自由的响应式设计,适应甚至未知和未来的设备类型。
要充分利用响应式模式,请打开媒体查询栏。

自定义可视窗口的大小

拖动可视窗口上的调节手柄或单击菜单栏中的值来进行精细度的控制。
响应式模式的调节手柄

Specific Device Mode(指定设备模式)

当你已经接近开发结束或者希望完善你的网站在特定手机(例如某个iPhone或Nexus)上的显示效果时,可以使用Specific Device Mode(指定设备模式),

内置设备预设

我们已在设备下拉列表中添加了当前最受欢迎的设备。选择设备后,每个预设自动配置某些设备的仿真特性:

  • 设置正确的 User Agent (UA) 字符串。
  • 设置设备分辨率和DPI(设备像素比)。
  • 模拟触摸事件(如果适用)。
  • 模拟移动滚动条叠加和元视口。
  • 为没有定义的视口的页面自动调整(提升)文本。

选择一个设备

添加自定义设备预设

Device Mode(设备模式)提供了各种各样的设备进行模拟。如果你发现边缘情况或没有被预置的特定设备时,你可以添加自定义设备。
要添加自定义设备:

  • 转到 DevTools Settings (设置)。
  • 点击 Devices (设备)选项卡。
  • 点击 Add custom device (添加自定义设备)。
  • 输入设备名称,宽度,高度,设备像素比和用户代理字符串。
  • 单击 Add (添加)。

现在,你的自定义设备可以在Device(设备)下拉菜单中找到,并且使用了。
添加自定义设备预设

设备状态和方向

切换设备方向
当模拟特定设备时,Device Mode(设备模式)工具栏显示一个附加控件,主要用于切换模拟设备的横向和纵向。
在所选设备上,控件不仅仅是定向切换。 对于受支持的设备(如Nexus 5X),您会看到一个下拉菜单,允许您模拟某些设备状态,例如:

  • 默认浏览器UI
  • 带Chrome导航栏
  • 打开键盘

改变设备UI

缩放至合适

有时,你需要测试分辨率大于浏览器窗口中实际可用空间的设备。在这些情况下,缩放至合适选项就派上用场:

  • Fit to Window (适合至窗口) - 自动将缩放级别设置为最大可用空间。
  • Explicit percentages (显式百分比) - 如果您想要测试图像上的DPI,显式百分比是有用的。

缩放至合适

可选的控件(如触摸、媒体查询,DPR)

可以通过点击设备工具栏右侧的三个小点来更改或启用可选控件。当前可选项包括:

  • 用户代理类型(模拟UA和触摸事件)
  • 设备像素比
  • 媒体查询
  • 标尺
  • 网络配置(UA,网络调节)

设备模式设置
请继续阅读以了解有关具体选项的详情。
(注:以下内容在最新版的Device Mode(设备模式)中有所更改)

User agent type(用户代理类型)

User Agent Type(用户代理类型) 或Device Type(设备类型)设置让你更改设备的类型。 可能的值有:

  • Mobile (移动)
  • Desktop (桌面)
  • Desktop with touch (带触摸的桌面)

更改此设置将影响移动视口和触摸事件模拟,并更改UA字符串。因此,如果您想为网站创建响应式的PC网站,并想要测试悬停效果,你应该从Responsive Mode(响应式模式)切换到Desktop

媒体查询

媒体查询是响应式网页设计的一个重要组成部分。要查看媒体查询检查器,在三点菜单中点击Show Media queries(显示媒体查询)。 DevTools 会检测样式表中的媒体查询,并在顶部标尺中将其显示为彩色条。
显示媒体查询
media query inspector
媒体查询的颜色编码如下:

| | 定位最大宽度的查询。 | | --- | --- | | | 定位范围内宽度的查询。 | | | 定位最小宽度的查询。 |

快速预览一个媒体查询

点击一个媒体查询栏可以调整视口大小和目标屏幕尺寸的预览样式。

查看相关的CSS

右键单击某一栏可以查看CSS中定义该媒体查询的位置并跳转到源代码中的定义。
web fundamentals media queries view

标尺

切换此选项可在视口旁显示基于像素的标尺。

配置网络(UA,网络调节)

选择此选项将打开一个抽屉式面板,允许你更改网络相关行为:
Disk Cache(磁盘缓存):当DevTools处于开启状态,禁用Disk Cache(磁盘缓存),停止页面,并且它们的资源不会被浏览器缓存。Network Throttling(网络限制)。User Agent(用户代理):允许您设置特定的UA(用户代理)字符串覆盖。
提示:您也可以从主菜单中打开Network conditions(网络条件)抽屉式面板。