20个最好的响应式Web设计测试工具

resizeMyBrowser

Now, you can easily choose the dimensions of your browser with resizeMyBrowser for testing. This website delivers 15 different presents to choose for testing or you can also enter your own custom screen sizes by adding description, width, and height.

Link: http://resizemybrowser.com/

ProtoFluid 4

ProtoFluid is one of the best web design-testing sites that streamline fluid layout development, adaptive CSS and responsive design.

ProtoFluid is better known for building dynamic viewpoints that enable to test your work. Even, with ProtoFluid 4, web designers can easily change effect and show advantages to interested parties. Available for free, it allows to use other extensions like FireBug as well.

Features:

• Viewport orientation switching
• Speedy testing functionality with Keyboard shortcuts.
• Viewport definitions for Nexus 7, iPhone, iPad, etc.
• Expert mode for client demos & presentations

Link: http://protofluid.com/

Responsinator

Responsinator enables you to test responsiveness of your website in different devices like iPhone, iPad, Kindle, Android and so on. Even, testers can easily see website in Landscape as well as Portrait modes

The best thing about this tool is it shows the outlines of the devices that showed on the page that enhances more meaning to the while process.

Link: http://www.responsinator.com/

FROONT

FROONT is another popular web-based design testing tools that can easily run in the browser and make design more responsive. It enables design access to all visual designers, no matter they have coding knowledge or not.

A responsive web design visual can be made easily by FROONT. For designing part, in-browser can be used with intuitive drag-and-drop tools. Interesting, it enable to show you’re designing like user will see. It delivers a fully functional HTML and CSS code rather than a static image to the developer.

Link: http://froont.com/

Responsivepx

It is an easiest tool to use for checking responsiveness of the website. In order to use this tool, you just have to enter URL (local or online) of your website.

You can use the controls for adjusting the width and height of the viewport in order to search exact breakpoint widths in pixels.

After that, you can also use such information in the media queries for developing a responsive design.

Link: http://responsivepx.com/

Opera Mobile Emulator

Nowadays, we have seen many applications for mobile phone and tablets launched in the market. With Opera Mobile Emulator, one can easily develop mobile application from desktop.

Link: http://www.opera.com/developer/mobile-emulator

The Responsive Calculator

Using this responsive calculator, web designers can easily convert PSD pixel into % (percent) while designing responsive site. For that, you just have to add some specifications into given box to convert your web page pixel into percentages.

Link: http://rwdcalc.com/

Viewport Resizer

One of the remarkable browser-based web design-testing tools, Viewport Resizer can check website’s responsiveness. For using this testing site, you just have to save the bookmarklet and visit the page that you want to check.

You can also click on your created bookmarklet to test different screen resolution of the page.

Features:

• Keyboard support
• Viewport information
• Visual preview of device metrics
• Vector-based
• Manually page reload

Link: http://lab.maltewassermann.com/viewport-resizer/

jResize Plugin

Built in jQuery, jResize is one of the best web development tools that help the workflow of developers on responsive projects. It is used for one-window responsive development.

In order to use this plug-in, you just have to click on various screen widths and the page will simply adjust by creating it easy to check/test your work. This tool comes with different approach that grabs entire HTML and changes the size inside the browser when you click on width size.

Link: http://toddmotto.com/jresize-plugin-for-one-window-responsive-development/

Screenqueri.es

Screenqueri.es is simple to use online site where you just have to enter URL and pull the slider to adjust the screen display’s width. Here, you have many preset testing alternatives like 12 popular tablets and 14 popular smartphones.

Link: http://beta.screenqueri.es/

Responsive Design Bookmarklet

The Responsive Design Bookmarklet is one of the simple and easy to use tools that just need a simple drag to use. Users just have to drag the bookmarklet above the bookmarks bar and such will be applied to your browser.

Additionally, one can choose preview option, the widths size of tablets and smartphones, available on the top of the page.

Link: http://responsive.victorcoulon.fr/

Am I Responsive?

‘Am I Responsive?’ is a simple to use Web tool for checking the responsiveness of any site. Additionally, one can easily preview image that can create excellent visualization for the designing meeting agendas, presentations, etc.

To use this site, you just have to add your URL to the input field and click on ‘Go’ button.

Link: http://ami.responsivedesign.is/

Screenfly

Screenfly is another excellent tools for testing responsiveness of the website. When using this site, you just have to enter URL and click on ‘GO’ option for getting preview of the web page under different preset screen dimensions.

Link: http://quirktools.com/screenfly/

Responsive Web Design Test Tool – Designmodo

Designmodo has developed one of the fabulous responsive design testing tools. This tool comes with collection of features that enable you t o test your website with an ease.

Responsive Web Design Test Tool has different present screen dimensions to choose from. Even, one can also set screen according to their needs.

Link: http://designmodo.com/responsive-test/

Mobitest

If you don’t have awareness of Mobile Web Performance tool, then using Akamai Mobitest is another excellent tool available for free. To utilize this tool, you have to paste your website’s URL in the search box and choose one of the device, runs and locations. Lastly hit on ‘Run Performance Test’ option.

Link: http://mobitest.akamai.com/m/index.cgi

Edge Inspect

Edge Inspect is an important application, specially developed for web developers and designers, who want to preview their content across various mobile devices.

Different types of iOS and Android devices are paired wirelessly to grab screenshots from connected device and to check out real-time outcomes from changes to CSS, JavaScript, and HTML.

In order use Edge Inspect on your computer, you have first download Edge Inspect on your computer and install the Google Chrome browser extension. Now, download extension from the Chrome web store and install the mobile client on your device.

Link: https://creative.adobe.com/products/inspect

Responsive.Is

Responsive.Is is another excellent browser emulator tool that can be used for testing responsive design. You just have to enter URL and it will convert into define size that you have chosen.

Link: http://responsive.is/

Responsive Web Design Testing Tool by Matt Kersley

Are you looking for amazing tools to test responsiveness of your website? Responsive Web Design Testing Tool by Matt Kersley is the best option for you to adopt for testing websites while you are designing or developing them.

If you want to test your site with this tool, you just have to enter your website’s URL into the address bar available at the top of the page. Along with the whole website, you can test specific web page as well.

Link: http://mattkersley.com/responsive/

ReView.js

ReView is one of the best dynamic viewport systems, offering an effective responsive web design viewing choice. Using this system, you can get both initial ‘Opt-In’ and ‘Opt-Out’ responsive design states.

This system is developed in pure JavaScript as per the principles of core for progressive improvement.

Link: http://responsiveviewport.com/

Retina Images

Different types of images are served by Retina images on the basis of the device that being used by the viewers. It is very simple to set up your site, you have to design a clear image that you want to optimize for retina screens and your work is done. Interestingly, you don’t have to change any img tags.

Link: http://retinaimag.es/