响应式设计的6个免费测试工具

时间: 2013-12-4 分类: 前端技术 作者: SAI

TAGS:

如果你在开发响应式设计的网站,你就知道这意味着什么了:每一次编辑 DOM 和 CSS 之后,你都要拽着浏览器的边缘拉拉扯扯,来测试你的编辑结果以及检查是否有什么东西故障了。

归根结底,大部分的努力都是为了适应不同设备的屏幕尺寸。

如果你给公司做开发,公司可能会给出各种各样的设备来测试。在我自己工作的地方,我们就用到了 iPad,iPod 和其他一两个平板电脑,笔记本或者台式机。如果没那么奢侈,那就只好用手边的设备来测试了。

因此,作为开发者应该怎么办呢?幸好,现在有许多基于浏览器的工具能够模拟多种设备的屏幕尺寸,其数量还在不断增长。当然,不同的工具有不同的特性和不同级别的功能。在此我们将会讨论其中几个。

出于测试的需要,你可以自己写一个真正的响应式网站,然后使用下面的六个工具测试。

Am I Responsive?

Am I Responsive?是一个如此简单的即时视图,它提供四种不同的设备来显示你的网站。四种设备都是 iOS 系统的,开发者解释说这正是这个网站所关注的。网站没有提供控制和选择,这只是一个简单、优雅的展现方式。

视区大小有:

  • 台式机——1600×992 像素,缩小到原大小的 0.3181 倍
  • 笔记本——1280×802 像素,缩小到原大小的 0.277 倍
  • 平板电脑——768×1024 像素,缩小到原大小的 0.219 倍
  • 手机——320×480 像素,缩小到原大小的 0.219 倍

引用一下这位开发者的所言,”这不是一个用来测试的工具,在真实的设备上测试是相当重要的。事实上对我来说,这是一个用于快速抓屏,或者在用户会议上让人们从视觉上了解到你的意图的工具。”

它有两个非常好的特性:能够抓起”设备“并放在屏幕上的任意地方,以及能够将你的测试网站嵌入一个可分享的链接中。在火狐中,至少在现在测试网站的结构下,iPone 上的侧边滚动栏不会显示,而在 IE 和 Chrome 中则会显示。

11

deviceponsive

deviceponsive 与 Am I Responsive?非常相似,它们都简单明了的展示了你的网站,而且对设备而言,都没有可见的控制和选项。所有设备在一页长网页上同时显示。你能够通 过改变背景颜色和嵌入你自己的 logo 来定制这个网站的页眉,之后截屏分享出去,这十分有趣。从某种方式来说,当你向顾客分享你的截屏的时候,也就帮这个网站打了广告。

该网站所 提供设备及其屏幕大小: Macbook——1280×800 iPad portrait——768×1024 iPad landscape——1024×768 Kindle portrait——600×1024 Kindle landscape——1024×600 iPhone portrait——320×480 iPhone landscape——480×320 Galasy portrait——240×320 * Galaxy landscape——320×240

使用这些工具时,大部分情况下,滑动条会在较小的设备上显示。然而在实际的设备上,滑动条不会显示。不过为了测试试图能在不支持触控的设备上也能滑动,必须要做出一些让步。

12

responsive test

跟 deviceponsive 一样,responsive test 用各种不同的设备显示你的网页。不过,跟 deviceponsive 将所有设备同时显示不同,它通过页面顶部一个简单的菜单来让你自己选择要显示的设备。我用一个中等大小的笔记本访问该网站,页面缩放能够正常工作,这能让我们在设备的限制框中看到整个测试网站。

这儿提供了十三种不同的视区,涵盖了从大型台式机显示器到被称为”糟糕的安卓机“(说句公道话,它们还有另外一个名字叫”更好的安卓机“)的机型。

在这个网页上,火狐又有些蹩脚。注意到这张截屏,在绿色的页眉和白色背景的内容中间只有蓝色的条带,那儿本来应该显示图像拖动条的。

13

responsive.js

它与前面的例子非常相似,不过有两点不同,responsive.js 利用流畅的动画效果来表现从一种设备到下一种的变化,再者,他用被半透明覆盖的方式表示网页在视区之外的部分。

这儿,唯一可选的设备是自动,它会填满你的浏览器窗口,效果就跟真正访问那个网站一样。台式电脑、平板电脑(水平)、平板电脑(竖直)、智能手机(水平)以及智能手机(竖直)这些显示分辨率都没有提供。

14

Screenqueries

与之前相同,一些细微的特性和选项似的 Screenqueries 稍 稍不同于之前的工具。它提供了 14 种手机和 12 种平板设备,并且能够单独控制切换水平和竖直模式。它们在有编号的像素网格上显示,分辨率就写在右下角。显示时,边框是可拉动的,因此你也可以定制大小。 鼠标单机或者放在测试区域会使得背景切换为灰色,这让你觉得看上去不那么杂乱。

对于很多该网站的设备,都有一个”Trueview“选项,它将你的测试网站用一个指定的设备浏览器窗口显示。这是一个非常有意思的特性。

非常不幸,火狐不能显示这个网站的图像滑动条,对此我已经习惯了。不要责怪我,事实上,火狐是我优先使用的浏览器,幸好我们还有其他选择。

 

Screenfly

Screenfly 实 实在在提升了可用系 数。它提供九种比平板更大的设备,从 10 寸的笔记本到 24 寸的台式电脑都有,此外还包括五种平板,九种手机,三种电视,还能够自己定制大小。通过另一个控制器,任何选取的设备都能被旋转成水平或者竖直的。你能够 选择是否允许滚动,你还能生成一个可用于分享的链接,只需要点一个按钮就行。

这个网站显示分辨率的方式非常十分有益。每一个在菜单中的设备都显示了名称和分辨率,浏览器的实际分辨率在接近右上角的地方,被选中的设备的分辨率则在展示区域的页脚,跟测试网站的 URL 写在一起。这一个小细节在文档截图和给客户分享信息时给人非常好的感觉。

之 前提到的这些足以使它成为一个完美的工具,但 Screenfly 的开发者还为它升级了代理服务器的特性,并认为非常合适。用写网站上的话来说,”Screenfly 能使用一个代理服务器,在你访问你的网站时伪装成其他设备。代理服务器模仿你所选择的设备的用户代理字符串,而不是该设备的行为。”

对于其他所有工具,处理这个地方时都仅仅是利用 CSS。Screenfly 是唯一一个允许基于代理字符串来测试的。

我给一个我自己写的,提供了手机版本的网页做了基于代理字符串的测试,手机版网页的结果非常好。所有效果都跟我想的一样,所有功能也都能通过测 试。测试代理字符串是保守的,这一点无可否认,不过这个网站就是这样保守的风格,而且代理服务器的特性也的确给网站带来了好处。

15

总结

总之,我们看过了不少这些测试响应式设计的资源。它们各有千秋,具体使用哪一个还是取决于你自己的需求和偏好。我鼓励你们去尝试和体会一下这些工具。作为 Web 开发者,我们用的工具当然是越能真正派上用场越好。

你用过上述工具吗?你怎样测试你的响应式设计?在评论中告诉大家把。

Javin

本文作者: SAI

推崇以用户为中心的设计理念,专注于用户体验设计,游走在视觉设计与前端开发之间。我要投稿

除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:塞纳» 前端技术 » 响应式设计的6个免费测试工具
本文地址:http://www.saiody.com/?p=626

返回顶部