Responsive breakpoints preview tool

I'll start by saying there really are loads of great tools out there to preview sites on different viewports / screen width.

Such as: http://mattkersley.com/responsive/, https://www.responsinator.com/ and http://responsivedesignchecker.com/.

And even some tools that offer excellent detection of media queries / breakpoints and then automatically create iframes of each so you can quickly view them, such as: http://breakpointtester.com/ and http://re-view.emmet.io/

The 1st set of tools are great, especially when demoing to clients to help them see different specific devices.

While the 2nd set of tools are also really useful when developing to see the different breakpoints built in and to quickly demo them side by side too.

The minor downside to these 2nd set of breakpoint tools however is they are either browser plugins or bookmarklets, which for some clients will not make a lot of sense.

Instead we need a tool like the 1st ones where you can link to it, but with breakpoint detection like the 2nd set of tools.

And so, here's a new tool you can use:

http://responsive.stapps.io/

Like the other tools, this only works on sites that don't block iframe access, e.g. google blocks it's site from being viewed in an iframe.

Also, unlike some of the other tools, it currently only works on sites with css breakpoints / media queries.

It has 2 display modes, the default one is a slider of each display size, you can use the arrows on the side or keyboard to navigate between them.

Then the other display mode is to show all the sizes next to each other, like the other breakpoint based tools, which is useful for quick comparisons.

You'll need to click "run" again to change the display modes.

It's pretty new so message me about any bugs, but enjoy :).

If you're an REC user, you can find a link to this under the preview url in Admin > Templates > Open/Edit Template