排名前15位的最佳响应式网页设计测试工具

jopen 9年前

Respondr

排名前15位的最佳响应式网页设计测试工具

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.

Responsivepx

排名前15位的最佳响应式网页设计测试工具

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.

ProtoFluid 4

排名前15位的最佳响应式网页设计测试工具

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.

Retina Images

排名前15位的最佳响应式网页设计测试工具

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.

Responsinator

排名前15位的最佳响应式网页设计测试工具

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.

The Responsive Calculator

排名前15位的最佳响应式网页设计测试工具

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.

Adobe Edge Inspect CC

排名前15位的最佳响应式网页设计测试工具

Adobe Edge lets you preview and inspect web designs on devices.

I am mobile

排名前15位的最佳响应式网页设计测试工具

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.

Mobitest

排名前15位的最佳响应式网页设计测试工具

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.

Jetstrap

排名前15位的最佳响应式网页设计测试工具

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.

Review.js

排名前15位的最佳响应式网页设计测试工具

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.

Screenqueri.es

排名前15位的最佳响应式网页设计测试工具

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.

Froont

排名前15位的最佳响应式网页设计测试工具

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.

Opera Mobile Emulator

排名前15位的最佳响应式网页设计测试工具

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.

Viewport Resizer

排名前15位的最佳响应式网页设计测试工具

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.