15个最好的响应式Web设计测试工具
Best Responsive Web Design Testing Tools
在这篇文章中，我们搜集了15个最好的响应式网页设计的测试工具
Viewport Resizer
Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page.
Opera Mobile Emulator
Developing for mobile phones and tablets becomes a breeze. The emulator is super simple to install and lets you do serious mobile development from your desktop.
Froont
FROONT is a web-base tool that runs in your browser and allows you to see what you’re designing in the same way users will. Present comps online on all devices. Instead of giving static images to your developer, provide them with fully functional HTML and CSS code.
Screenqueri.es
Screenqueri.es is a pixel perfect responsive design testing tool that lets you test your responsive design on 30 different device resolutions presets or check with custom resolution by resizing window.
Review.js
ReView is a dynamic viewport system that provides efficient responsive web design viewing choice. Developed in pure JavaScript according to the principles of core (mobile) first progressive enhancement. The system provides both initial ‘Opt-In’ and ‘Opt-Out’ responsive design states.
Jetstrap
This is where Jetstrap comes in. It’s a visual interface-building tool for the Bootstrap framework. It provides a way for designers to quickly assemble rapid prototypes in the browser by dragging and dropping UI components onto a canvas.
Mobitest
Akamai Mobitest is a free tool created to raise awareness to Mobile Web Performance. Simply enter a URL, choose one of the device/location options above, and hit run. Your page will be loaded on a real mobile device, and you’ll receive rich detail about how long it took to load, including waterfall charts and video recording of the page load.
I am mobile
I am mobile is another good responsive design testing tool that test your web sites on various viewports and also gives you some tips to make your websites more mobile friendly.
Adobe Edge Inspect CC
Adobe Edge lets you preview and inspect web designs on devices.
The Responsive Calculator
The Responsive Calculator aids the web designers to convert PSD pixel to percent during the start of your responsive website. All you need to do is simply insert a few specifications and you’re done with turning your web page pixels into percentages.
Responsinator
Responsinator helps website makers quickly get an indication of how their responsive site will look on the most popular devices Responsivator lets you test your web applications iphone and ipad, kindle and Android platform. It also shows your site both in portrait and landscape mode.
Retina Images
Retina Images serves different images based on the device being used by the viewer. Once setup on your website (very simple!) all you have to do is create a high-res version of each image you would like optimized for retina screens and all the work is done for you.
ProtoFluid 4
ProtoFluid simplifies the development of fluid layouts, adaptive CSS and responsive design. It builds precise, dynamic viewports in which to test your work. This allows you to quickly effect changes and demonstrate benefits to interested parties. It is free and lets you use other extensions like FireBug.
Responsivepx
With responsivepx you need to Enter the url to your site – local or online: both work – and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design.
Respondr
Respondr is a lightweight, pretty useful and handy tool that lets you test your websites on different devices. You need to enter the URL of the site/page that you want to test, and then select the device of your choice. You can select an iPhone, iPad, or desktop.