10个有用的响应式设计测试工具

Trevin是WebFX的业务开发高级总监。他参与过450多个营销活动,20多年来一直在建设网站。他的作品被《搜索引擎土地》、《今日美国》、《快公司》和《公司》推荐。

为了让测试站点的响应性这一关键任务变得更容易,这里有一些优秀的测试免费在线工具退房。

ResponsiveTest

ResponsiveTest这个开源工具(repo在GitHub上如果你想在本地设置它)可以让你看到网页如何在不同的屏幕尺寸下呈现。ResponsiveTest支持很多设备,比如iPhone、黑莓、三星手机、戴尔笔记本电脑等等。

Responsinator

ResponsinatorResponsinator接受一个URL,然后输出一系列设备模型,其中呈现的网页,这样你就可以了解页面布局将如何被你的用户在各种设备上体验。

响应

响应这个工具的一个有用的功能是它提供了键盘快捷键(例如,按T将显示你的平板电脑预览)。如果你喜欢在各种设备预览之间快速来回切换,这是很方便的。

我有反应吗?

我有反应吗?这是一个简单的Web工具,用于测试任何站点的响应性。此外,它渲染的预览图像可以为您的演示文稿、设计会议等提供很好的视觉效果。

视窗大小

视窗大小这个有用书签简单地让你调整你的浏览器到一个特定的维度,例如iPhone 5的维度,或亚马逊Kindle Fire,或任何一个Viewport Resizer的47个屏幕大小预置。

resizeMyBrowser

resizeMyBrowser这个工具可以让你根据15个默认大小来调整浏览器的大小,以匹配一些流行的设备(MacBook, iPad等)。您还可以设置自己的自定义尺寸,它还会告诉您当前浏览器窗口的大小。

Screenfly

Screenfly就像这个列表中的其他一些工具一样,Screenfly接受任何URL,然后让你在各种预设屏幕尺寸下预览网页。

响应式网页设计测试工具由Designmodo

由Designmodo设计的响应式Web设计测试工具Designmodo有自己的响应式设计测试工具,在设计或调试响应式断点时可以派上用场。

响应式网页设计测试工具由pixeltuner.de

响应式Web设计测试工具和Responsinator一样,这个由pixeltuner.de开发的响应式网页设计测试工具允许你输入一个URL,然后在几个设备模型中呈现。

responsivepx

responsivepxResponsivepx可以处理本地文件。我要做的就是在web浏览器中打开HTML文档,然后复制并粘贴URI到responsivepx中。当您在计算机上进行响应式设计项目时,这非常有用。

你应该使用哪种工具?

很多都是这样响应设计测试工具的工作方式基本相同,所以选择一个测试工具实际上只是个人偏好。我建议你把它们都试一试,然后选择你最喜欢的一个。

你最喜欢的响应式设计测试工具是什么?在评论中分享和谈论它。

读也

WebFX职业

加入我们的使命,为全球各地的企业提供行业领先的数字营销服务-同时建立您的个人知识和个人成长。

我们招聘! 视图30 +职位空缺!