使用 Device Mode 模拟移动设备

使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站。了解如何使用 Device Mode 模拟多种设备及其功能。

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

简述

切换 Device Mode 按钮可以打开或关闭 Device Mode。

当 Device Mode 打开时,该图标呈蓝色 ()。

当 Device Mode 关闭时,该图标呈灰色 ()。

测试自适应和设备特定的视口

  • 使用 Device Mode 的屏幕模拟器测试网站的响应能力。
  • 保存自定义预设,便于日后访问。
  • Device Mode 不能替代真实设备测试。请注意它的限制。

利用视口控件,您可以针对各种设备测试网站,以及是否能够实现完全自适应。它包括以下两个模式:

  1. 自适应。使视口可以通过任意一侧的大手柄随意调整大小。
  2. 特定设备。将视口锁定为特定设备确切的视口大小,并模拟特定设备特性。

自适应模式

我们建议将自适应模式用作您的默认工作模式。在您的网站和应用的活动开发期间使用这一模式,并经常调整视口大小以创建完全自适应设计,这种设计可以适应未知和未来的设备类型。

要充分利用自适应模式,请启用媒体查询栏

自定义视口大小

在视口上拖动调整大小的大手柄,或者点击菜单栏中的值进行精确调整。

特定设备模式

在接近活动开发末期以及想要了解网站在特定移动设备(例如,特定 iPhone 或 Nexus)上的外观时,可以使用特定设备模式

内置设备预设

我们已在设备下拉菜单中包含了当前最热门的设备。选择设备后,每个预设都会自动配置特定设备特性的模拟:

  • 设置正确的“User Agent”(UA) 字符串。
  • 设置设备分辨率和 DPI(设备像素比)。
  • 模拟触摸事件(如果适用)。
  • 模拟移动设备滚动条叠加和 meta viewport。
  • 自动调整不带已定义视口的页面文本的大小(效果增强)。

添加自定义设备预设

Device Mode 提供了多种用于模拟的设备。如果您发现某款边缘或冷门设备未涵盖在内,可以添加自定义设备。

要添加自定义设备,请执行以下操作:

  1. 转至 DevTools 的 Settings 面板。
  2. 点击 Devices 标签。
  3. 点击 Add custom device
  4. 输入设备名称、宽度、高度、设备像素比和 User Agent 字符串。
  5. 点击 Add

现在,您的自定义设备将显示在 Device 下拉菜单中。

设备状态和方向

模拟特定设备时,Device Mode 工具栏会显示另一个控件,主要用于在横向和纵向屏幕方向之间切换。

在选定的设备上,控件不只是可以切换方向。对于支持的设备(如 Nexus 5X),您会获得一个下拉菜单,可以模拟特定设备状态,如:

  • 默认浏览器 UI
  • 显示 Chrome 导航栏
  • 显示打开的键盘

缩放到合适大小

有时,您可能想要测试分辨率大于浏览器窗口实际可用空间的设备。这种情况下,Zoom to Fit 选项会很方便:

  1. Fit to Window 会自动将缩放级别设置为最大的可用空间。
  2. 例如,如果您想要测试图像的 DPI,Explicit percentages 会非常有用。

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

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

  • User Agent 类型(模拟 UA 和触摸事件)
  • 设备像素比
  • 媒体查询
  • 标尺
  • 配置网络(UA、网络节流)

继续阅读,详细了解特定选项。

User Agent 类型

User Agent Type 或 Device Type 设置让您可以更改设备的类型。 可能的值为:

  1. Mobile
  2. Desktop
  3. Desktop with touch

更改此设置会影响移动设备视口和触摸事件模拟并更改 UA 字符串。 因此,如果您想要为桌面设备创建自适应网站,且想要测试悬停效果,请在 Responsive 模式下切换到“Desktop”。 :

提示:您也可以在 Network conditions 抽屉式导航栏中设置 User Agent。

设备像素比 (DPR)

如果您想要从非 Retina 机器上模拟 Retina 设备或者从 Retina 机器上模拟非 Retina 设备,请调整设备像素比。 设备像素比 (DPR) 是逻辑像素与物理像素之间的比率。与普通设备相比,带有 Retina 显示屏的设备(如 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 倍资源看上去还是比较清晰,1 倍资源看上去则比较模糊。

媒体查询

媒体查询是自适应网页设计的基本部分。要查看媒体查询检查器,请在三圆点菜单中点击 Show Media queries。DevTools 会在样式表中检测媒体查询,并在顶端标尺中将它们显示为彩色条形。

用彩色标记的媒体查询示例如下:

 蓝色 针对最大宽度的查询。
 绿色 针对一定范围内宽度的查询。
 橙色 针对最小宽度的查询。

快速预览媒体查询

点击媒体查询条形,调整视口大小和预览适合目标屏幕大小的样式。

查看关联的 CSS

右键点击某个条形,查看媒体查询在 CSS 中何处定义并跳到源代码中的定义。

标尺

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

配置网络(UA、网络节流)

选择此选项会在抽屉式导航栏中打开一个面板,您可以在其中更改网络相关行为:

  1. Disk Cache:停用 Disk Cache 将在打开 DevTools 时停止浏览器缓存页面及其资源。
  2. Network Throttling:在此处阅读更多有关网络节流的信息。
  3. User Agent:允许您设置特定的 UA (User Agent) 字符串替换值。

提示:您也可以从主菜单中打开 Network conditions 抽屉式导航栏。

限制

Device Mode 存在一些限制。

  • 设备硬件
  • 无法模拟 GPU 和 CPU 行为。
  • 浏览器 UI
  • 无法模拟系统显示,如地址栏。
  • 无法将原生显示(如 <select> 元素)作为模态列表模拟。
  • 一些增强功能(如数字输入打开小键盘)可能会因实际设备行为不同而不同。
  • 浏览器功能
  • WebGL 可以在模拟器中操作,但 iOS 7 设备不支持 WebGL。
  • Chrome 不支持 MathML,但 iOS 7 设备支持 MathML。
  • 无法模拟 iOS 5 方向缩放错误
  • 行高 CSS 属性可以在模拟器中操作,但 Opera Mini 不支持行高 CSS。
  • 无法模拟 CSS 规则限制,例如 Internet Explorer 中的规则限制。
  • AppCache
  • 模拟器不会替换 AppCache 清单文件 的 UA 或查看源请求

尽管存在这些限制,Device Mode 还是十分强大,能够完成大多数任务。 如果需要在真实设备上测试,可以使用远程调试获得其他数据分析。

 

chrome开发工具指南(十二)的更多相关文章

  1. chrome开发工具指南(二)

    Application 面板 使用 App Manifest 窗格检查您的网络应用清单和触发 Add to Homescreen 事件. 使用 Service Worker 窗格执行与服务工作线程相关 ...

  2. Chrome 开发工具指南

    Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...

  3. chrome开发工具指南(一)

    注意:如果你是一个网页开发者同时想要获得最新版本的开发工具,那么你应该使用谷歌浏览器(金丝雀)Canary 版. Chrome 开发者工具 打开Chrome 开发者工具 选择浏览器位于浏览器窗口右上方 ...

  4. chrome开发工具指南(十四)

    模拟和测试其他浏览器 您的任务不只局限于确保网站在 Chrome 和 Android 上出色运行.即使 Device Mode 可以模拟 iPhone 等多种其他设备,我们仍鼓励您查看其他浏览器模拟解 ...

  5. chrome开发工具指南(十)

    检查和删除 Cookie 从 Application 面板检查和删除 Cookie. TL;DR 查看与 Cookie 有关的详细信息,例如名称.值.网域和大小,等等. 删除单个 Cookie.选定网 ...

  6. chrome开发工具指南(七)

    检查动画 使用 Chrome DevTools 动画检查器检查和修改动画. 通过打开动画检查器捕捉动画.检查器会自动检测动画并将它们分类为多个组. 通过慢速播放.重播或查看动画源代码来检查动画. 通过 ...

  7. chrome开发工具指南(六)

    检查和编辑页面与样式 使用 Chrome DevTools 的 Elements 面板检查和实时编辑页面的 HTML 与 CSS. 在 Elements 面板中检查和实时编辑 DOM 树中的任何元素. ...

  8. chrome开发工具指南(十三)

    模拟传感器:地理定位与加速度计 由于大多数桌面设备都没有 GPS 芯片和加速度计,所以测试它们比较困难.Chrome DevTools 的 Sensors 模拟窗格可以通过模拟常见的移动设备传感器来降 ...

  9. chrome开发工具指南(十一)

    检查资源 使用 Application 面板的 Frames 窗格可以按框架组织资源. 您也可以在 Sources 面板中停用 Group by folder 选项,按框架查看资源. 要按网域和文件夹 ...

随机推荐

  1. ECMAscript6新特性之解构赋值

    在以前,我们要对变量赋值,只能直接指定值.比如:var a = 1;var b = 2;但是发现这种写法写起来有点麻烦,一点都不简洁,而在ECMAScript6中引入了一种新的概念,那就是" ...

  2. JavaSE(五)JAVA对象向上转型和向下转型

    今天做了一个测试的题目,发现自己还是很多问题没有静下心来做.很多问题是可以自己解决的但是自己一是没有读清题意,二是自己心里太急躁了.所以这个要自己应以为鉴! 对象的转型问题其实并不复杂,我们记住一句话 ...

  3. wamp问题:关于另个php.ini文件的”…

    一.现象解说 修改从图表打开的php.ini文件,重启apache后,我们的问题没有解决... 二.解决方法 1.php.ini的位置 wamp/apache2/bin/php.ini wamp/ph ...

  4. Hadoop新生报到(一) hadoop2.6.0伪分布式配置详解

    首先先不看理论,搭建起环境之后再看: 搭建伪分布式是为了模拟环境,调试方便. 电脑是win10,用的虚拟机VMware Workstation 12 Pro,跑的Linux系统是centos6.5 , ...

  5. struts2上传文件类型列表

    '.a'      : 'application/octet-stream',         '.ai'     : 'application/postscript',         '.aif' ...

  6. swift AVAudioPlayer播放音频时声音太小

    设置下声音输出的扬声器就行了 代码如下 do { try AVAudioSession.sharedInstance().overrideOutputAudioPort(AVAudioSessionP ...

  7. 已有 JFFs2文件系统的修改

    项目应用中,对于前人留下的JFFS2的文件,有时候我们需要修改,但是苦于没有源文件,实际操作很多时候无所适从.每次支持生产之后再进行人为的升级.这样费时费力,也给生产人员增加了负担. 为了解决这个问题 ...

  8. 【LeetCode】数组-1(643)-返回规定长度k的最大子数组的平均数

    好久没有刷LeetCode了,准备重拾并坚持下去,每天刷个两小时.今天算是开始的第一天,不过出师不利,在一道很简单的题目上墨迹半天.不过还好,现在踩过的坑,应该都不会白踩,这些可能都是以后程序员路上稳 ...

  9. 《Java从入门到放弃》入门篇:hibernate查询——HQL

    不知不觉又到了hibernate的最后一篇了,只感觉时光飞逝~,岁月如梭~! 转眼之间,我们就···························,好吧,想装个X,结果装不下去了,还是直接开始吧· ...

  10. Linux学习总结(十一)—— Linux常用命令:版本信息查看(RedHat、CentOS、Debian、Ubuntu、Fedora、Oracle)

    这篇文章收集了CentOS.Oracle.RedHat等系统查看发行版本.内核版本.位数的方法,欢迎补充. 系统 发行版本 -- 内核版本.位数 RedHat cat /etc/issue cat / ...