竹磬网-邵珠庆の日记 生命只有一次,你可以用它来做些更多伟大的事情–Make the world a little better and easier

68月/130

如何免费进行响应式设计测试

开发一个响应式设计网站,我们每对DOM、CSS进行一次修改,都需要拖动浏览器窗口的大小,来测试本次修改是否会破坏整体的布局。所有的努力都是为了评估该网站在不同屏幕上能否很好的展现。

如果进行企业研发,你可能需要公司提供各种各样不同的设备,以便分别在上面进行测试。但对于自由开发者来说,不可能购买所有类型的新手机、平板以及电脑。那该怎么办呢?

专业Web开发工程师Steve Ralston在博文《How to test responsive designs for free》中指出,现在已经有越来越多的基于浏览器的工具,用来模拟各种不同设备的屏幕。同时介绍了一系列此类工具。下面将以作者Steve Ralston设计的响应式网站PajamasOnYourFeet.com为例,分别对这些工具进行介绍与测试。

Am I Responsive?

Am I Responsive? 是一个超级简单的工具。利用它,你可以迅速查看网站在四个不同屏上的显示效果。四个屏均为iOS操作系统。该工具只关注网站整体,不提供控制与选择,只是对网站的简单展现。

不同设备的屏幕尺寸分别为:

 

  • 桌面:1600px*992px,按0.3181比例等比缩放;
  • 笔记本:1280px*802px,按0.277比例等比缩放;
  • 平板电脑:768px*1024px,按0.219比例等比缩放;
  • 移动手机:320px*480px,按0.219比例等比缩放;

 

该工具有两个非常好的特性,其一是可拖动每个“设备”到屏幕的任何地方,其二是只需要输入你要测试网站的链接即可。在Firefox中,该测试网站在iPhone中无法显示右侧的滚动条,而在IE和Chrome中则可正常显示。

deviceponsive

deviceponsive与Am I Responsive相似。所有的设备均显示在同一长页面中。它还有一个有趣的特性,你可以编辑页面顶部的背景颜色并插入自己的Logo,来定制网站的顶部区域,并通过截屏进行分享。

该网站模拟的设备及屏幕尺寸:

 

  • Macbook:1280px*800
  • iPad(纵向):768px*1024px
  • iPad(横向):1024px*768px
  • Kindle(纵向):600px*1024px
  • Kindle(横向):1024px*600px
  • iPhone(纵向):320px*480px
  • iPhone(横向):480px*320px
  • Galaxy(纵向):240px*320px
  • Galaxy(横向):320px*240px

 


responsive test

与deviceponsive相仿,responsive test同样可以将你的网站“展示”在各种设备上,但并非同时展现在一个长页面中,你可以在页面顶部的菜单中选择要展示的设备。选择中等尺寸的笔记本电脑,会发现PajamasOnYourFeet.com页面的缩放效果很好,你可以在测试设备的边框内看见整个测试页面。

该网站提供了13种屏幕尺寸,从大的桌面显示器到小的Android设备。

Firefox在显示该页面时仍存在一些问题。注意下面这个截图,在绿色背景的头部与白色背景的内容区之间,只有一个蓝色背景的条纹图——这个位置本该有一个图片轮播图。

responsive.is

与前面提到的两个工具相似,之所以将responsive.is单独提出,是因为在该工具上,由一种设备跳转到另一设备时中间会有顺畅的过渡动画效果,对于不在屏幕内展示的内容会用半透明效果进行遮盖。

该工具大概展示了页面在桌面、平板电脑(横向、纵向)、智能手机(横向、纵向)上的显示效果,并没有具体指出各类型设备屏幕的具体尺寸大小。

Screenqueries

Screenqueries提供了14种手持设备和12种平板设备的模拟环境,设备的横向与纵向的转换需要单独控制。网站上有标有像素值的网格,在测试设备的模拟区域的右下角标注了屏幕的尺寸。测试区域的边缘可进行拖动,你可以根据需要改变对随意大小的尺寸进行测试。鼠标悬于、点击测试区域,网站的背景就会变成灰色,便于用户进行测试观察。

该网站一个有趣的功能,针对其中的一些设备提供了“Trueview”选项,以此来展示网站在特定设备的Chrome浏览器中的展示效果。很遗憾,Firefox中仍无法显示测试网站中的图片轮播图。

Screenfly

Screenfly在可用性方面有了大大提高。它提供了9款比平板电脑大的设备(从10寸的笔记本到24寸的台式机)、5款平板电脑、9款智能手机、3款电视设备,并提供了单独按钮,允许用户自己设置测试尺寸。用户还可通过网站提供的菜单项“Rotate Screen”,实现设备横向与纵向的切换。此外,你可以选择是否添加滚动条,还可以点击“Share”菜单项产生一个分享链接。

该网站可以显示像素信息。选择菜单中的每种设备,网站会同时显示出该设备的名称及尺寸(以像素为单位),你实际使用的浏览器窗口的大小显示在窗口的右上角,被选设备的尺寸及测试网站的链接会显现在展示区域的下方。

所有的这些功能特性,使它成为一款完美的工具,但Screenfly的开发者又将它提升到更高层次,提供了代理服务器功能。引用该网站上的话,“当你浏览自己网站时,Screenfly可以使用代理服务器来模拟各种设备。代理服务器能模拟你所选择设备的代理字符串,但无法模拟这些设备的行为动作。”

上文提到的其他设备只能处理CSS,Screenfly是唯一可基于代理字符串进行测试的工具。

测试我设计的基于代理字符串的移动版本网站,结果相当好。展示结果与我期望地完全相符,功能全部测试通过。不可否认,针对代理字符串进行测试太老旧了,但这说明该网站“兼容以前的技术”,代理服务器的功能对该站点进行了有利补充。

结论

可见很多资源可以帮助我们测试响应式网站。你可以基于自己喜爱与要求选择合适的工具。作为开发者,拥有真正有用的工具越多越好。

喜欢这个文章吗?

考虑订阅我们的RSS Feed吧!

发布在 邵珠庆

评论 (0) 引用 (0)

还没有评论.


Leave a comment

还没有引用.