如何测试响应式网站

我们每天通过多种设备访问互联网。移动电话，台式机/笔记本电脑，平板电脑，平板电脑…我们所掌握的设备数量已经增长为天文数字。作为消费者，体验很棒。我们可以随时随地在任何设备上自由访问互联网。但对于Web开发人员，设计人员和测试人员来说，这是一场噩梦。

软件团队需要找到构建和设计的方法，以适应所有这些设备和浏览器。响应式网站就是这样做的 - 根据正在查看的设备做出响应。

在这里插入图片描述

什么是响应式网页设计？

响应式网页设计是一种以响应用户行为和需求的方式进行设计和开发的方法。换句话说，响应式设计可确保网站针对所有设备进行优化。 Ethan Marcotte在2010年首次向全世界介绍了“响应式设计”的概念。响应式网页设计的目标是让一个网站在所有浏览器和设备上都能很好地展示。

响应式网页设计意味着您正在构建您的网站，并了解它可以在任何浏览器或设备上查看。您不能假设您的CSS和Javascript只会在所有设备上神奇地工作，您需要为此进行规划，最后您需要对其进行测试。

响应式网站测试技巧

如果时间和预算不受限制，我们可以一直在所有设备和浏览器上进行测试。但现实是不允许的，没有那么多资源（时间或者设备）。

10个通用响应式网站检查

以下是您希望在跨设备/浏览器的测试中涵盖的一些基本测试：

网站是否加载？ - 你会对这个问题出现的频率感到惊讶。不要制作只能在某个浏览器上才能运行的网站。

可点击/可点击区域是否合适？ - 没有什么比点击按钮却看不到任何效果更令人沮丧的了。举个例子：您需要确保系统能在当今所有不同类型的设备上都可以响应“轻触”操作。

设备的内边距？ - 留意不同设备间的填充差异。

文字是否正确对齐？ - 您可能需要跨设备以不同方式定位某些文本元素。

所有浏览器的字体呈现方式是否相同？ - 字体引入了一个全新的问题世界。确保您的字体在所有设备上都可读。

按钮/元素是否缺失？ - 您的CSS很可能需要修改才能使某些元素出现在所有设备/浏览器上。

页面内容是否在中心对齐？ - 同样，某些设备可能存在需要调整的对齐问题。

每个断点是否显示最重要的元素？ - 定义断点非常重要，并确保在较小的屏幕上查看您的站点时，所有重要的内容都可见。

有没有javascript错误？ - 检查这些表面级错误将立即解决许多其他问题。

动态数据是否正确显示？ - 确保CSS和HTML表格正确响应并包含动态内容。

是否感到不知所措？不要吝啬为自己的产品来投入设计团队。毕竟，他们会更好地了解这些东西应该设计成什么样子。

优先考虑设备和浏览器

不要一开始就抓取设备来测试。要有目的地进行测试。了解您的受众群体，并根据该信息确定设备和浏览器的优先级。使用数据来推动这些决策。Google Analytics（分析）将为您提供人们查看您网站（浏览器，平板电脑，移动设备）的基本细分方式。您可以使用移动设备报告进一步了解这一点，以查看哪些类型的设备正在访问您的网站，甚至是这些设备的屏幕尺寸。

一旦确定要测试的设备和浏览器列表，就需要跟踪每个测试的结果。
在这里插入图片描述

响应式网站测试工具和资源

对于您要测试的设备，您需要亲自操作。购买一堆设备可能会花销很大。特别是考虑到每年上市的所有新手机，平板电脑和台式机。这就是为什么社区聚集在一起并开发模拟器的原因。下面是在跨设备进行测试时需要考虑的一些工具和资源：

BrowserStack - 行业领导者，提供跨浏览器和多设备测试的工具。
CrossBrowserTesting - 类似于BrowserStack，CBT允许您模拟设备和浏览器。
BrowserShots - 免费的开源工具，可在各种不同的Web浏览器中生成您网站的屏幕截图。
Browserling - 实时跨浏览器网站测试允许您更改屏幕大小以进行响应式测试。
Google Dev Tools设备模式 - 允许您在不同的屏幕尺寸和分辨率下模拟您的网站。
Responsinator - 让您快速了解您的网站在苹果和Android热门产品上的外观。
Labcase - 将物理设备运送到您的办公室进行测试的服务。
OpenDeviceLab.com - 一种草根运动，使开发人员和测试人员能够访问更多种类的设备。
LabUp！ - 帮助世界各地的人们建立非营利性开放式设备实验室，以便为测试提供各种设备。
Ghostlab - 同时在多个浏览器/设备上测试您的网站或应用程序。
查看跨浏览器工具列表，了解可以帮助进行响应式浏览器测试的其他工具。

最后

响应式网站设计在软件开发领域引入了一些复杂性。在我们为网络编写和设计时，它让我们保持警觉。通过测试响应能力，您可以确保用户在任何设备上访问您的网站时都能获得成功。