响应式设计几乎是当代网站制作的基础构成之一。在实质设计和开发的过程中,想要让网站根据设计响应不同尺寸屏幕,设计师和前端需要花费相当的时间来进行测试和优化。所以,今天博久网络搜集了7款功能强大的响应式页面测试工具,下面就一一介绍一下。
1.XRESPOND
这款名为XRespond的工具自称为“虚拟设施实验室”,这个称号其实是名副其实的。
通过Xrespond打开网页,你可以看到它在不同屏幕尺寸下的样子,整个布局是横向的,所以你需要横向滚动页面才能看到它所有些样子。
屏幕上方的标签会标识出它是为何设施所匹配的,在下拉框当中可以选出不同品牌不同型号的智能手机、平板和笔记本屏幕,以预览成效。
2.RESPONSINATOR
和XRespond的功能相似,Responsinator也提供了不同屏幕尺寸下的预览成效。不过,Responsinator的布局和前者不同,纵向滚动更符合平时的交互逻辑。
你可以在Responsinator中看到最常见的手机端设施,譬如iPhone、iPad、Nexus系列,包括横屏和竖屏的预览。
Responsinator还支持http链接和https之间的切换,应用会依据你输入的链接自动辨别和适配,并且会防止SSL错误。
3.RESPonSIVE DESIGN CHECKER
想要迅速测试一个网站是不是是响应式的并不难,用Responsive Design Checker来测试就好了,这款工具可以很便捷地助你自概念屏幕尺寸和分辨率,来进行更深入的测试。
你可以在边栏中,找到预概念的设施的屏幕尺寸/分辨率,譬如Nexus平板电脑,Kindle或者谷歌 Pixel手机。
在这里同样可以对大屏尺寸进行测试,即便是在小屏幕上运行这一工具也同样能达到成效。现在Responsive Design Checker支持大24英寸的屏幕。
4.GOOGLE MOBILE TEST
谷歌为网站管理员和网站开发者提供了不少优质的工具,而谷歌 Mobile Test也是其中之一。
这款工具不是真的意义上的预览工具,也不可以助你精确地判断UI中的错误。但它是一款超级好用的手机端工具,它能助你在手机上迅速定位网站中的问题。
一旦开始运行测试,测试结果肯定是以失败或者成功来结束的。对于设计师而言,这个结果可能看着比较粗糙,但谷歌会针对需要改进的地区和元素进行标识,并且提供改进的提示。
这个工具或许不少一个完整的响应式工具,但它是很靠谱的手机端测试工具,并且是用来搜集和整理信息的好地方。
5.MATT KERSLEY’S RESPonSIVE TOOL
设计师兼开发者Matt Kersley发布的这款不收费的响应式布局测试工具,是很多测试工具中最朴素的一款。
虽然没太多装饰,但这款工具内置了5种固定的宽度用来测试,分别是240px,320px,480px,768px,1024px。
预览界面中有滚动条,可以借此来浏览其中内容,但你不可以点击其中的内容,所以这款工具极其合适测试单个页面。
6.AM I RESPONSIVE?
当然,假如你测试页面的时候,需要测试过程中页面像素好的话,那样你还是不要用Am I Responsive这款工具了。
相反,假如你的测试需要迅速测试页面在几款容易见到设施上的显示成效的话,倒是个很好的选择。
同样是输入链接生成预览,Am I Responsive能助你测试出页面在智能手机、平板电脑、手提电脑和桌面端设施上的浏览体验。
这款工具的闪光点在于,它能在截图的同时,生成对应设施的外观,和页面的尺寸比率进行匹配。
7.DESIGNMODO RESPonSIVE TEST
这款名为Designmodo Responsive Test的工具是著名的设计博客Designmodo所推的工具,免费,易用,可以针对特定的宽度来测试网页的显示成效。
这款工具大的优点是其中基于网格的页面设置。你可以用这款网页应用来测试网页的像素点和页面内置的栅格系统。
除去用预制的宽度来测试,你还可以自己拖动来调整宽度进行预览。
本文名字响应式网页测试工具确保你的设计万无一失