数字营销
加载的结果……
测试你的响应式网页设计这一点至关重要，因为移动设备上的用户体验与桌面设备截然不同。但在市场上的所有移动设备上进行实际测试对我们大多数人来说并不实际。因此，一个简单的响应式设计测试技术就是调整浏览器的窗口大小，使其与智能手机和平板电脑的视口大小相匹配。
这是一种快速且肮脏的基本视觉测试方法，能够帮助我们发现主要问题，但却不能准确地描述移动设备体验。移动设备有独特的触摸交互，如滑动和缩放，同样，桌面也有鼠标悬停和右键单击等交互。响应的设计必须解释这些差异。
本教程将讨论一种有效和实用的方法来调试和测试您的应用程序响应的设计．它涉及到一个你可能已经拥有的工具:谷歌Chrome。谷歌Chrome的DevTools有一个特性叫做设备模式它装载了用于测试和调试响应式设计的有用工具。
设备模式是前所未有的。大多数其他响应式设计测试工具只需调整你的视口大小，但设备模式实际上模拟了移动设备的体验，特别是在你的网页浏览器中，像轻敲和滑动这样的触摸屏交互。以下是设备模式的主要功能:
- 移动设备仿真:设备模式为流行的智能手机和平板电脑(如iPhone、Galaxy、黑莓、Kindle、Nexus等)提供了精确的模型，模拟了您的响应式设计在触摸屏上的外观和功能。它甚至欺骗UA字符串，以匹配您正在测试的特定设备，这样您就可以获得非常精确的设计预览。
- 触摸事件仿真:这个功能可以让你体验你的设计，就像你在智能手机或平板电脑上与他们互动一样。
- 媒体查询检查员:这是一个非常有用的特性，可以显示所有媒体查询断点。单击断点可以调整设计预览的大小，因此您不再需要手动调整浏览器窗口的大小。
- 移动网络模拟:移动互联网连接不同于我们机器上的高速宽带连接。此外，世界上许多地区还没有接入LTE等更快的移动互联网技术。设备模式可以向您展示您的设计在EDGE、3G、LTE、DSL和WiFi上的表现，以帮助您识别潜力网络性能问题。
开始使用设备模式，在谷歌Chrome浏览器中打开你的网页设计。然后,打开开发人员工具点击Chrome的菜单，然后选择更多工具>开发人员工具．打开开发人员工具的快捷键为Ctrl + Shift + I(赢)或选择+命令+ I(Mac)。
你现在应该看到Chrome开发工具(从现在开始缩写为DevTools)面板在底部或在你的浏览器的视口的右边。
点击设备模式图标(这是一个超级小的按钮，看起来像智能手机)来切换设备模式。
当设备模式开启时，你会看到如下图所示的东西，智能手机图标会变成蓝色:
在特定移动设备上的响应式设计测试
使用设备面板来模拟特定移动设备的体验。这将允许你在上述移动设备上直观地测试你的设计，以及测试类似触摸的交互。
假设我们想看看我们的响应式设计在iPhone 5上的外观和功能。我们所需要做的就是在< >选择模型下拉列表:
设备模式会改变设计预览，这样你就能看到iPhone 5用户可能看到的东西。更重要的是，如果你注意到，你的鼠标光标现在是一个圆圈。当您上下移动鼠标时，设计预览将上下滚动，模拟滑动交互行为。
将光标移动到链接上不会表现为你在它上面悬停(因为触摸屏上没有悬停)。
媒体查询测试/调试
当您使用设备模式时，调试和测试媒体查询断点非常容易。只需点击设备模式左上角的“瀑布”图标，它就会向你显示断点的条形图。
此外，将鼠标悬停在“瀑布”图标上，将显示您正在测试的页面上的媒体查询数量。
点击栏将立即切换到媒体查询断点的设计预览。在您的媒体查询之间来回切换非常快，使得这个功能相当节省时间。
媒体查询条的颜色表示所表示的媒体查询的类型:橙色是最小宽度的媒体查询，蓝色是最大宽度的媒体查询，绿色是最小和最大范围的媒体查询(例如。@media (min-width: 320px) and (max-width: 640px))．相关文章:基于设计的媒体查询
移动互联网测试
方法可以测试响应式设计的感知性能网络设备模式特性。
单击“网络”下拉菜单并选择要测试的移动网络技术，例如EDGE或3G。此功能将限制您的互联网连接，以匹配您选择的网络技术。
结论
DevTools是一个非常强大的工具，设备模式使它成为现代网页设计师工具包中更加不可或缺的一部分。
在设备模式中还有更多的功能供您探索，例如:
- 改变了
devicePixelRatio在设备面板中测试视网膜显示器上的用户体验 - 垂直/水平标尺在视口的顶部和左侧，以帮助您注意某些像素长度
- 手动重写代理字符串(网络面板底部的文本字段)
请在下面的评论中分享您的响应式设计测试策略。关于设备模式，你有什么建议可以分享吗?
相关内容
WebFX职业
加入我们的使命，为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。
