推荐15款响应式Web设计测试工具

日期: 2014-02-10 来源:TechTarget中国 英文

响应式网页设计也称作自适应网页设计(通常缩写为RWD),该设计可使网站在多种浏览设备(从桌面计算机显示器到移动电话或其他移动产品设备)上阅读和导航,同时减少缩放、平移和滚动。换句话说,响应式网站能够自动响应终端用户行为。当市场上有新设备推出时,网站就无需再花时间去设计和开发了。

响应式旨在为各个网站在不同的设备上提供最佳的视觉体验,那么如何才能知道网站是否能够根据设备进行自动调整呢?这就得设计人员对网站的响应能力进行测试。本文就为大家介绍15款最佳的响应式网站测试工具,它们能帮助你检查网站的设计是否能够友好地响应各种设备,帮助你设计出能够适应不同尺寸和操作系统设备的网站。

1.ProtoFluid 4

ProtoFluid简化了液态布局的开发,能够适应CSS和响应式设计,能够构建出精准、动态的视角。开发者可免费使用ProtoFluid,并且还允许开发者使用其它扩展工具,比如FireBug。

2.Viewport Resizer

Viewport Resizer是一款基于浏览器的测试工具,它能够测试任何网站的响应能力。用户只需把网页拖入书签,然后点击需要测试的网页即可检查页面的屏幕分辨率。此外,Viewport Resizer自带的分辨率尺寸不一定能够满足你的需求,所以,用户还可以自定义添加其它类型的屏幕尺寸。

3.Responsive.IS

用户只需输入要测试的网址,即会根据你所选的设备自动改变网页的大小。

4.Respondr

Respondr是一款轻量级、非常方便小巧的工具,用户只需输入网页的URL,然后选择你所要测试的设备,如iPhone、iPad、桌面浏览器等,即可看到网页在不同平台上的显示效果。

5.Froont

Froont是一款基于Web的设计工具,不需要程序员介入的设计编程工具,为设计师们提供了可视化的在线网页设计环境。

6.Responsivepx

Responsivepx 是一个功能简单、但却很方便实用的测试工具,可以测试网页在不同尺寸的显示器上所呈现的效果。此外,Responsivepx 能让你自行调整要显示的尺寸长宽px值。用户即可在线使用,也可以在本地上对网页进行测试。

7.Responsive

Responsive可以让你看到测试网站在同一个屏幕上显示不同分辨率下的效果,不需要切换到不同的模式。

8.Screenfly

Screenfly是一款免费的测试工具,可以用来测试不同客户端下(不同显示器或者移动设备)网站的显示状况。

9.Review.js

Review.js是一个动态的viewport系统,提供高效的响应式网页浏览选择。它是一个纯JavaScript实现的类库,更少的请求使得它对宽带的要求更少,支持插件式的扩展,并且可以支持自定义窗口改变事件。此外,该系统还提供了‘Opt-In’和‘Opt-Out’响应式设计状态。

10.Responsinator

Responsinator提供了仿真的Web界面来测试你的响应式设计,提供了iPhone,Android,iPad,Kindle及其多种设备上的预览效果,你可以方便地看到需要支持的设备的响应式设计效果图。

11.resizeMyBrowser

resizeMyBrowser是一个响应式网页设计工具,允许你选择需要测试的浏览器尺寸。用户可以在15种不同的预设尺寸中选择或输入自定义的尺寸。

12.Responsive Design Bookmarklet

Responsive Design Bookmarklet是一款响应式设计测试工具,用户需要把网页拖拽到书签上方的书签栏,浏览器即会自动应用。用户可以查看网页在不同设备上的预览效果。

13.Adobe Edge Inspect CC

Adobe Edge可以让你在设备上预览和检查响应式网站。

14.I am mobile

I am mobile可以测试网页在各种不同窗口上的显示效果,并且还会给出一些建议,让你的网站更具移动友好性。

15.Retina Images

Retina Images主要用来测试图片在不同的设备上的显示情况,这样有利于用户在开发出高清晰度的图片。此外,你无需更改任何img标签,并且Retina Images安装也十分方便。

我们一直都在努力坚持原创.......请不要一声不吭,就悄悄拿走。

我原创,你原创,我们的内容世界才会更加精彩!

【所有原创内容版权均属TechTarget,欢迎大家转发分享。但未经授权,严禁任何媒体(平面媒体、网络媒体、自媒体等)以及微信公众号复制、转载、摘编或以其他方式进行使用。】

微信公众号

TechTarget微信公众号二维码

TechTarget

官方微博

TechTarget中国官方微博二维码

TechTarget中国

相关推荐

  • 移动响应式应用测试之性能测试

    创建能够自适应所有不同平台和屏幕尺寸的Web应用也有一些副作用。如果网页能够自适应不同的表格因素,性能是否能够达到合理范围有可能就会是个问题。

  • 移动响应式应用测试之浏览器

    响应式设计应用—使得网页可以自适应任何表格因素—已经是主流技术,网络带宽大幅增加,Web服务日趋流行。

  • HTML5的改进推动迁移

    现在关于HTML5的问题,现在已经不是要不要迁移到HTML5上;迁移是必然的,但何时迁移才是问题。

  • 如何成为一个移动端UI设计师

    移动端的UI设计有其独有的一套设计规则和约束。新技术的不断加入促进了移动平台的快速增长,而移动端的UI设计也和传统的平面海报/网页设计不太一样。