All tools
Responsive tester
See a website or your localhost development server at the sizes of phones, tablets and laptops side by side, loaded by your own browser. Free, with no account or uploads.
See your site on every device
Type the address of your site or your development server, and see it at the sizes of phones, tablets and laptops side by side. Your browser loads it straight from the site; nothing goes through KeepSimp.
Try
Lay them out
WrapOne rowOne at a time
Breakpoints
Tailwind CSSBootstrapNone
Each device is marked with the breakpoint its width is in.
Every device one by one, turning them on their side and sizes of your own are in the tester's window, under Devices.
The sizes are each device's own; the browser drawing them is yours, so touch, the user agent and the pixel density are this browser's.
A little help along the way
Follow these steps. Every option is explained underneath, and the site is loaded by your own browser, never through KeepSimp.
- Type the addressType your site's address, such as example.com, or your development server's, such as localhost:3000 or 192.168.1.20:5173, and press Show it on devices (on the tester's own page, first choose which screens: one of each, phones, tablets, or laptops and desktops). A name on your computer or network is opened over http, anything else over https.
- Choose the devicesTick the devices to show on the left (on a phone, under the devices button), find one by name or size, or start from a set: a phone, a tablet and a laptop; popular phones; Apple; Android; laptops and desktops.
- Look at them side by sideEach device shows the site at its own width and height, drawn smaller so that they fit side by side. Choose Fit, or a size such as 50% or 100%, above them.
- Turn, reload and openEach device's title has buttons to turn it on its side, load the page again and take the device away; its menu moves it earlier or later and opens the site in a new tab. The button beside the address loads every device again.
- Arrange themDrag a device by the dots in its title to put it elsewhere. Under the layout button (or More options before you start), lay them out to wrap, in one row, or one at a time with a tab for each; draw device frames round phones and tablets; and choose whose breakpoints each device is said to be in, Tailwind's or Bootstrap's.
- Sizes of your ownUnder Your sizes, name a size and give its width and height, then Add this size. Change it by typing a new width or height, or drag its corner on the canvas to resize it and watch the breakpoint change.
- Keep them in syncUnder the sync button, How to turn syncing on gives one line to put in your site while you develop it. With it, scrolling, clicks, typing and going to another page on one device are done on every other device too; switch each kind off in the same menu, which also says how many devices are in sync.
- Take picturesPress the camera button (or P) and let the browser share this tab. Each device in view becomes a picture of its own at the size shown: save each one, or all of them in one zip.
- KeysR loads every device again, T turns them all, + and − show them larger or smaller, 0 fits them and 1 shows them at full size, F draws frames, D chooses devices, P takes pictures, Ctrl or ⌘ + L goes to the address and ? lists the keys. Ctrl or ⌘ and the wheel, or a pinch, sizes the devices.
Every option explained
- Exact sizes
- Each device's frame is the device's own size in CSS pixels, so your media queries for width, height and orientation work as they do on the device. Phone and tablet sizes are the page's area as the browser shows it, from Playwright's device list.
- What is not the device
- The browser drawing the devices is yours: its engine, user agent, touch and pixel density stay this browser's. It shows layouts at each size; for the browser itself, test on the device.
- A device stays blank
- The site refuses to be shown inside another page, with an X-Frame-Options or frame-ancestors header. Many large sites do; your own site and development server usually do not. Open it in a new tab instead.
- localhost
- Chrome may ask to let the page reach servers on your computer: allow it. Safari can refuse localhost inside a page served over https; use another browser or serve your site over https.
- Signing in
- A site shown inside another page may not get its cookies, so a page that needs you to sign in can show signed out.
- Breakpoints
- Each device's title says which breakpoint its width is in: Tailwind CSS's sm 640, md 768, lg 1024, xl 1280 and 2xl 1536, or Bootstrap's sm 576, md 768, lg 992, xl 1200 and xxl 1400, from their own documentation. Below the first it is base.
- The sync line
- It does nothing unless the page is shown inside the tester, and speaks only with the tester's window. It passes on where the page is scrolled, what was clicked or typed in (never a password) and the page's address, and goes only to other pages of the same site. Take it out before the site goes live.
- Pictures
- A page cannot draw another site's frame, so the pictures come from the browser's own sharing of this tab, which it asks you for each time; choose this tab. A device out of view is left out, so fit them to the window first. The sharing stops as soon as the picture is taken. A phone's browser cannot share a tab, so pictures are taken on a computer.
- Remembered
- The devices you show, their order and which way up, your own sizes, how they are laid out and what is synced are remembered in this browser, so the tester opens as you left it. The addresses you test are never kept.
- Privacy
- Your browser loads the site straight from its own address. KeepSimp never sees the site, the address or what is on it.