5个免费在线响应式网页设计测试工具

jopen 9年前

5 Free Responsive Web Design Testing Tools

 

quriktools-responsive-testing-tool.jpg

This is the first tool which I suggest you to use, because they offer 4 services.

  • Smaps (For quickly and easily building site maps, taxonomy, or hierarchy data)
  • Wires (Interactive wireframes and prototypes right in your web browser.)
  • Screenfly (Responsive screen testing on monitors, tablets, smart phones and more.)
  • Retro (Screen Data and diagnostic tools for our device.)

Check your site responsiveness with 3rd option of “Screenfly”. The best option in this tool is that you can set your custom screen size to see the result of your website responsiveness. The tool offer different kind of pre-defined screens from 24 inch desktop screen to 176×220 pixel of mobile screen. Select the required screen and test your website responsiveness.

responsive-design-checker.jpg

This is the 2nd tool which I mostly use to check responsive design of my websites. Enter your URL and hit “GO” button; you will see the result on different size of screens. Select the required size of screen and look for the responsiveness of your website. What I mostly like on this site is that they have very clean and neat design and offer different kind of services like, landscape and portrait view of website. You can check your website that how it look like on iPhone, Nexus, iPad and much more options.

Note: Make sure to test your site in both mode (Landscape and Portrait) to find any bug or problem in your design.

resonsive-test.jpg

Again a tool with selection of required pixel, you can either set your own pixel size or you can select already defined screen sizes. I am big fan of their Rotate option, enter your desired pixel hit enter and then you can click on rotate to check the design either in landscape or in portrait style.

am-i-responsive.jpg

A very simple and neat tool, enter URL and check the site responsiveness right on the screen in 4 different views.  The best option on this site is this you can scroll down your site on the device. Mouse over on any design and scroll down to check the complete design. This tool offers 4 different viewports as following.

  • Desktop (1900x992px scaled down to scale 0.3181)
  • Laptop (1280x802px scaled down to scale 0.277)
  • Tablet (Tablet 786x1024px scaled down to scale 0.219)
  • Mobile (320x480px scaled down to scale 0.219)

responsive-is.jpg

The best thing about this tool is that you can see complete website in any responsive style with overly of transparent layer. This tool offers you 6 kind of checking services with just one click. Display result is very clear and easy to understand if there is any bug in the design.