0%

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

原文链接: Steve Ralston   翻译: 伯乐在线 - 伯乐在线读者
译文链接: http://blog.jobbole.com/45535/

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

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

Screenfly

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

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

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

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

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

原文中列举了6个免费的测试工具,实际使用了这两个工具,可以满足一般的测试需求,那么你喜欢使用哪个工具呢?