由于现在终端设备的发展,各种各样分辨率下网页有兼容需求,所以响应式网站设计变得越来越流行,制作好响应式网站后,如何测试它的显示效果呢?东莞网络公司新势力网络科技为大家推荐一下五个测试工具:
测试工具一:RESPONSINATOR
网址:http://www.responsinator.com/
介绍:
Responsinator 提供了不同屏幕尺寸下的预览效果。Responsinator 的布局纵向滚动更符合日常的交互逻辑。
你可以在 Responsinator 中看到最常用的移动端设备,比如iPhone、iPad、Nexus 系列,包含横屏和竖屏的预览。
Responsinator 还支持 http 链接和 https 之间的切换,应用会根据你输入的链接自动识别和适配,并且会避免SSL错误。
测试工具二:RESPONSIVE DESIGN CHECKER
网址:http://www.responsivedesignchecker.com/
介绍:
想要快速检测一个网站是否是响应式的并不难,使用 Responsive Design Checker 来检测就好了,这款工具能够非常便捷地帮你自定义屏幕尺寸和分辨率,来进行更深入的测试。
你可以在边栏中,找到预定义的设备的屏幕尺寸/分辨率,比如Nexus 平板电脑,Kindle 或者 Google Pixel 手机。
在这里同样可以对大屏尺寸进行测试,即使是在小屏幕上运行这一工具也同样可以达到效果。目前Responsive Design Checker 支持最大 24 英寸的屏幕。
测试工具三:MATT KERSLEY’S RESPONSIVE TOOL
网址:http://mattkersley.com/responsive/
介绍:
设计师兼开发者 Matt Kersley 发布的这款免费的响应式布局测试工具,是诸多测试工具中最朴素的一款。
虽然没有太多装饰,但是这款工具内置了5种固定的宽度用来测试,分别是 240px,320px,480px,768px,1024px。
预览界面中有滚动条,可以借此来浏览其中内容,但是你不能点击其中的内容,所以这款工具极其适合测试单个页面。
测试工具四:AM I RESPONSIVE
网址:http://ami.responsivedesign.is/
介绍:
当然,如果你测试页面的时候,需要测试过程中页面像素完美的话,那么你还是不要用 Am I Responsive 这款工具了。
相反,如果你的测试需要快速测试页面在几款常见设备上的显示效果的话,倒是个不错的选择。
同样是输入链接生成预览,Am I Responsive 能帮你测试出页面在智能手机、平板电脑、笔记本电脑和桌面端设备上的浏览体验。
这款工具的亮点在于,它能在截图的同时,生成对应设备的外观,和页面的尺寸比例进行匹配。
测试工具五:DESIGNMODO RESPONSIVE TEST
网址:http://designmodo.com/responsive-test/
介绍:
这款名为 Designmodo Responsive Test 的工具是著名的设计博客 Designmodo 所推的工具,免费,易用,可以针对特定的宽度来测试网页的显示效果。
这款工具最大的优点是其中基于网格的页面设置。你可以使用这款网页应用来测试网页的像素点和页面内置的栅格系统。
除了使用预制的宽度来测试,你还可以自己拖动来调整宽度进行预览。