Am I Responsive?

I made this tool to easily see how my websites look on different devices.

It helps me take screenshots of various device sizes for responsive design without spending a lot of time.

I hope it's useful for you too, especially for showing clients who prefer visual explanations what responsive design means when actual products aren't available.

Just a heads up – it's not for testing on real devices, so make sure to do that separately. It's meant for quickly getting screenshots and visually explaining things in client meetings.

How it works

This tool allows you to preview how your website looks on different devices. Just type the URL of the website you want to preview in the input field above and hit enter.

Features

http://localhost/ works so it’s great for taking screenshots of local development URLs.

Send a URL to a friend or colleague by adding ?link=https://example.com to the URL. For example, check out my wife’s website.

It’s open source! Check out the source code on GitHub.

Viewport sizes

Here are the viewport sizes for each device:

iMac: 2560 x 1440 scaled down to scale(0.23)
MacBook 14 Pro: 1512 x 987 scaled down to scale(0.253)
iPad Pro: 954 x 1330 scaled down to scale(0.243)
iPhone 15 Pro: 393 x 852 scaled down to scale(0.3)

Android fan?

Good news! I'm Android fan too. And I'm not planning to build a tool for Android devices. But you can use Responsive Viewer for that.

May the 4th be with you,
Alex