专注于
IT技术和业内交流

Chrome Devtools — 测试响应与模拟设备视窗

更新后的设备模式(从Chrome 49开始)是现在“移动优先”开发工具的一个组成部分,并延伸了目前的主要工具条。接下来我们将要学习如何使用它的控件来模拟大多数设备或响应。

使用视窗控件

启动设备模式

通过视图控件你可以在各种设备和响应上测试您的网站。它有两种模式:

  1. 快速响应. 通过两边的调节手柄来轻松调整视窗大小。
  2. 特定装置. 将视窗锁定在具有特定视窗大小的设备上来模拟某些设备的特性。

响应模式

我们建议使用 响应模式作为你的默认工作模式。 在你的网站和应用程序开发过程中,积极调整视窗来创造一个自由响应式设计去适应甚至是未知的和未来的设备类型。

要获得最多的响应模式,打开媒体查询栏。

自定义视图的大小

可以通过拖动视窗上的调节手柄或单击选择菜单栏中的值来进行精细度的控制。

设备的具体模式

使用特定的模式时,当你已经接近开发结束或者希望完善你的网站在特定手机上的演示效果时,可以使用这个具体模式。(例如,某些特定型号的Iphone或Nexus手机)。

内置装置的预设

我们在下拉列表中几乎预置了当下所有流行的设备。 在选定一个设备后,每一个预设将自动配置一定的设备仿真特性:

  • 设置正确的”User Agent”(UA)。
  • 设置设备分辨率和DPI(设备像素比)。
  • 模拟触摸事件(如果可行的话)。
  • 在视窗中模拟移动滚动条。
  • 在没有定义视窗的前提下调整(提升)页面文本的大小。
select a device

添加自定义设备设置

设备模式可用于广泛模拟真实设备。当你遇到特殊情况或者有没有被预置的特定设备时,可以添加一个自定义设置。

添加自定义设备:

  1. 找到工具设置选项。
  2. 单击 设备选项卡。
  3. 单击 添加自定义设备选项卡。
  4. 输入设备名称、宽度、高度、设备像素比和用户代理字符串。
  5. 单击 添加

到此为止,您的自定义设备装置已经可以在 设备下拉菜单中使用了。

select a device

设备状态和方向

toggle orientation

当模拟一个特定的设备时,该设备模式工具栏中会显示一个额外的控制按钮,主要是用来切换横向和纵向。

在选定的设备后,对设备的控制将不只是方向切换。以支持的设备如Nexus 5X为例,你会看到一个可用于模拟某些设备特性的下拉列表,如:

  • 默认浏览器界面
  • 带chrome导航条
  • 展开的键盘
Change the Device UI

缩放适应

有时你会想测试一个设备,该设备比浏览器窗口中的实际可用空间要大得多。在这些情况下,缩放适应选项将会很有用:

  1. 适应窗口 将自动将缩放级别设置为可用的最大可用空间。
  2. 举个例子,百分比将会在你想要测试图片的DP时非常有用。
Zoom to Fit

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

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

  • 用户代理类型(模拟UA和触摸事件)
  • 设备像素比
  • 媒体查询
  • 规则
  • 网络配置(UA,网络节流)
Device Mode Settings

接下来,讲解更多关于具体选项的知识点。

用户代理类型

用户代理类型或设备类型,可以让你更改
该装置的类型。可更改的值有:

  1. 手机
  2. 桌面
  3. 桌面触摸

更改此设置将影响移动视窗和触摸事件模拟和
改变UA字符串。因此,如果你想创建一个响应式的PC网站
和测试悬停效果,在响应模式切换到“桌面”。

提醒: 你也可以在网络条件选项里面设置用户代理类型。

设备像素比(DPR)

如果你想在一个非视网膜设备上模拟视网膜设备,或者反过来,需要调整设备的像素比
比如(DPR)是逻辑像素和物理像素之间的比值。
视网膜显示设备如Nexus 6P,比常规设备有更高的像素密度,它可以影响视觉的清晰度和视觉内容的大小。

网上一些关于“设备像素比”(DPR)的例子有:

  • CSS媒体查询等:

    @media (-webkit-min-device-pixel-ratio: 2),
    (min-resolution: 192dpi) { … }

  • CSS image-set
    规则。

  • srcset
    图片属性。

  • window.devicePixelRatio 属性。

如果你有一个原生的Retina显示屏,你会发现,低“每英寸点数”(DPI)的图像看起来是像素化的而高DPI的图像则是清晰的。可以在标准显示器上通过将DPR设置为2和缩放视窗来模拟该效果。
2倍的资产将仍然清晰,而1X的图像将会像素化。

媒体查询

媒体查询(/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries)是响应式网站一个重要的组成部分。单击显示媒体查询三个点菜单,可查看媒体查询检查器。该开发工具检测媒体查询的样式表并将它们显示为彩色标记。

媒体查询检查

媒体查询颜色编码如下:

#colortable { width: 60%; border: none; } #colortable td { border: none; } .max-width { background: #327ff2; width: 10%; } .max-and-min { background: #3b9903; width: 10%; } .min-width { background: #d4731f; width: 10%; }

Queries targeting a maximum width.
Queries targeting widths within a range.
Queries targeting a minimum width.

快速预览媒体查询

点击媒体查询栏来为指定的屏幕尺寸来调整视区大小和预览样式。

查看相关的CSS

右键单击一个栏查看,在源码中CSS是如何将媒体查询定义和跳转的。

基本面网络媒体查询查看

规则

切换此选项来显示靠近视窗的基于像素的规则。

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

选择此选项将打开一个抽屉面板,您可在此更改网络相关行为:

  1. Disk Cache:,当DevTools处于开启状态,将禁用磁盘缓存停止页面和浏览器缓存功能。
  2. Network Throttling: 了解更多关于网络限制.
  3. User Agent:允许您设置一个特定的UA(用户代理)字符串。

提醒:您也可以从主菜单面板中打开网络条件选项

局限性

设备模式有一定的局限性。

  • 设备硬件
    * GPU和CPU的行为无法模拟。
  • 浏览器的用户界面
    *系统显示,如地址栏,不会模拟。
    *本地显示器,如元素,没有模拟为一个模式列表。
    *一些增强功能,如数字输入打开键盘,可能与实际设备的行为有所不同。
  • 浏览器功能
    * WebGL可以在模拟器中实现,但不支持在iOS 7设备。
    * MathML不支持Chrome,但支持iOS 7设备。
    *本iOS 5的方向变焦错误不模拟。
    *行高CSS属性在模拟器中可实现,但不支持Opera Mini。
    * CSS规则的限制,如在Internet Explorer中,不会模拟。
  • APP Cache
    *模拟器不覆盖 UA标签为应用程序缓存清单文件查看源代码的请求

尽管有这些限制,设备模式仍然可以用于大多数情况下。
当你需要在真实设备上测试时,你可以使用远程调试

本文由张晋旖翻译、周海欧校验,感谢大家的参与.如有错译、漏译请留言我们会及时更正。

未经允许,不得转载本站任何文章:代码山 » Chrome Devtools — 测试响应与模拟设备视窗

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们