设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客
LUPA开源社区 首页 IT综合资讯 查看内容

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

2013-8-13 12:00| 发布者: joejoe0332| 查看: 2249| 评论: 0|原作者: 老码农|来自: 伯乐在线

摘要:   “别再拖拽拉扯那个浏览器了,你快把它弄坏了!”这样的话你听过多少次了?好吧,可能不是特别多,但如果你在开发响应式设计的网站,你就知道这意味着什么了:每一次编辑DOM和CSS之后,你都要拽着浏览器的边缘拉 ...

Screenqueries


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


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


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


 

Screenfly

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


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


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


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


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


 

总结


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


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


酷毙

雷人

鲜花

鸡蛋

漂亮
  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部