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

Web前端21.9K阅读模式

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

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

1.ProtoFluid 4

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

推荐15款响应式Web设计测试工具-图片1

2.Viewport Resizer

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

推荐15款响应式Web设计测试工具-图片2

3.Responsive.IS

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

推荐15款响应式Web设计测试工具-图片3

4.Respondr

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

推荐15款响应式Web设计测试工具-图片4

5.Froont

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

推荐15款响应式Web设计测试工具-图片5

6.Responsivepx

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

推荐15款响应式Web设计测试工具-图片6

7.Responsive

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

推荐15款响应式Web设计测试工具-图片7

8.Screenfly

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

推荐15款响应式Web设计测试工具-图片8

9.Review.js

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

推荐15款响应式Web设计测试工具-图片9

10.Responsinator

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

推荐15款响应式Web设计测试工具-图片10

11.resizeMyBrowser

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

推荐15款响应式Web设计测试工具-图片11

12.Responsive Design Bookmarklet

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

推荐15款响应式Web设计测试工具-图片12

13.Adobe Edge Inspect CC

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

推荐15款响应式Web设计测试工具-图片13

14.I am mobile

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

推荐15款响应式Web设计测试工具-图片14

15.Retina Images

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

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

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
评论  2  访客  2
    • 网站目录
      网站目录 1

      国外的东西,英文看不董啊

      • qietu
        qietu 0

        推荐另外一款 [ 跨屏测 ]

      匿名

      发表评论

      匿名网友
      :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

      拖动滑块以完成验证