A page that looks right at 1920 by 1080 can break at 360 pixels wide. You find out after launch, when a visitor on a phone sees a menu that overlaps the text. Kwebby's screen resolution simulator loads a website in a frame at the width and height you choose, so you can check the layout at that size first.
Pick a preset such as iPhone SE or Desktop HD, or enter a custom size. The tool is part of Kwebby's Free Image Tools Online. This guide explains what the preview shows, what it leaves out and which screen sizes to check first.
Key Takeaways
- Kwebby's Screen Resolution Simulator loads a URL in a frame at a chosen width and height, using eight presets from 360 by 800 to 1920 by 1080 or a custom size.
- The page loads in a frame of that width, so its CSS media queries respond to it. The tool does not change the user agent, the pixel ratio or touch input, so it checks layout, not devices.
- Zoom buttons for 25, 50, 75 and 100 percent scale the frame. The default is 50 percent.
- Some sites refuse to load inside frames and show a blank preview.
- StatCounter puts mobile at 58.99 percent of worldwide page views in September 2026, so check narrow widths first.
- Use Chrome DevTools or a real device for final checks. Chrome calls its own device mode a first-order approximation.
What Is the Kwebby Screen Resolution Simulator?
Kwebby's Screen Resolution Simulator is a free browser tool that previews a website at a chosen screen size. You enter a URL, pick a preset or a custom width and height, and click Preview. The page loads in a frame of that size, so you can check the layout without a physical device.
It works as a basic responsive design tester or screen size simulator. No account is needed.
Key Features and How It Works
The tool has a URL field, a row of size buttons, zoom buttons and a preview box.
URL field and Preview
Type or paste an address into the URL field. If the address does not start with http, the tool adds https:// for you. Click Preview or press Enter. The Preview button stays disabled until the field contains text. If you enter an http:// address, the tool warns that browsers block insecure pages inside a secure page, so use the https:// version where one exists.
Device presets
The preset buttons show a label and a size in pixels. The selected button is highlighted, and Desktop 1366 by 768 is selected when the page opens.
| Preset | Width by height |
|---|---|
| Desktop HD | 1920 by 1080 |
| Desktop | 1366 by 768 |
| Laptop | 1280 by 800 |
| iPad Pro | 1024 by 1366 |
| iPad | 768 by 1024 |
| iPhone 14 Pro | 393 by 852 |
| iPhone SE | 375 by 667 |
| Galaxy S21 | 360 by 800 |
Phone and tablet presets are upright. To see a device turned sideways, use Custom and swap the width and height.
Custom size
Click Custom, then type a Width and a Height in pixels. The fields start at 800 by 600. Values are kept between 200 and 3840 pixels. Use this for sizes the presets skip, such as 320, 390 or 1440 pixels wide.
Zoom
Zoom sets how much of the frame you see: 25, 50, 75 or 100 percent. The tool scales the frame with CSS, and the size label next to the zoom buttons still shows the simulated width and height. The preview box scrolls when the frame is taller than the box.
What the frame changes and what it does not
The frame changes one thing: its width and height. Because the page is loaded in a frame of that width, its CSS media queries respond to it, and clicking another preset resizes the frame at once.
It does not send a mobile user agent, set a device pixel ratio or turn on touch input. A site that picks its layout on the server from the user agent looks the same at every size. Chrome DevTools device mode simulates a mobile viewport, CPU and network throttling, device pixel ratio, touch events and user agent, and Chrome still calls it "a first-order approximation".
Why Testing Screen Sizes Matters
Visitors use many screens. StatCounter's platform data for September 2026 shows mobile at 58.99 percent of worldwide page views, desktop at 39.26 percent and tablet at 1.76 percent. A layout checked only on a laptop misses most visitors.
Search engines care too. Google says it uses the mobile version of a site for indexing and ranking, and its mobile-first indexing guide tells site owners to keep content equivalent on mobile and desktop.
Accessibility sets a hard floor. WCAG 1.4.10 Reflow, a level AA criterion, requires that content be usable without scrolling in two dimensions at a width equivalent to 320 CSS pixels.
How to Use the Screen Resolution Simulator
- Enter the URL. Type or paste the address into the field that shows https://example.com as its placeholder.
- Click Preview. You can also press Enter. The page loads in the frame at the selected size. On first use that is Desktop at 1366 by 768 and 50 percent zoom.
- Choose a preset. Click Desktop HD, Desktop, Laptop, iPad Pro, iPad, iPhone 14 Pro, iPhone SE or Galaxy S21. The frame resizes.
- Enter a custom size. Click Custom, then type a Width and a Height in pixels, for example 390 and 844.
- Adjust the zoom. Click 25%, 50%, 75% or 100%. Use 100% to see true size and scroll inside the preview box.
- Review the layout. Check the menu, text, buttons and images. If the frame stays blank, the site probably blocks framing.
Best Practices for Screen Size Testing
Good tests follow a pattern. These habits catch the most problems.
Start with the narrowest width
Begin at 320 to 375 pixels wide. WCAG's Reflow criterion uses 320 CSS pixels as its measure, and small widths break first. Common mistake: testing the desktop view and assuming the phone view follows.
Step through the sizes between presets
Layouts often break between device widths, not at them. Use Custom to try 450, 600, 900 and 1100 pixels. Common mistake: testing only the named devices.
Match sizes to real usage
StatCounter's screen resolution data for September 2026 lists 1920 by 1080 first at 10.71 percent, then 414 by 896 at 8.05 percent, 360 by 800 at 4.79 percent, 384 by 832 at 4.57 percent, 1536 by 864 at 3.81 percent and 390 by 844 at 3.65 percent. The presets cover 1920 by 1080 and 360 by 800. Enter the others in Custom, and check your own analytics for the sizes your visitors use.
Confirm the viewport meta tag
Without a viewport meta tag, MDN explains, mobile browsers render the page in a virtual viewport wider than the screen and shrink it. A frame does not reproduce that behavior, because it is already the width you set. Use Get Source Code of Webpage to confirm the page includes <meta name="viewport" content="width=device-width">.
Compare phone and desktop content
At phone width, confirm that the same headings, text and links are still there. Run the Website Reviewer afterward to check meta tags and other page basics. Common mistake: hiding content on small screens.
Finish on a real device
Open DevTools device mode with Ctrl+Shift+M on Windows and Linux or Cmd+Shift+M on Mac. Add a real phone before launch, because the simulator cannot test touch, pixel density or browser quirks.
Keep a visual record
When you find a problem, capture it. The Website Screenshot Generator turns a URL into an image you can attach to a bug report. Use the Mobile Friendly Test for Lighthouse mobile scores.
Common Use Cases
- Responsive QA before launch: check the home page, a blog post and a checkout page at phone, tablet and desktop widths.
- Layout debugging: find overlapping text, buttons that are too small and horizontal scrolling.
- Client demos: show a stakeholder how a page looks on a phone without passing a device around.
- Accessibility checks: test the 320 pixel reflow width from WCAG.
- Design reviews: compare a redesign at the same widths as the old page.
- Content checks: confirm the headline and main call to action are visible without scrolling on a phone.
Related Kwebby Tools
These tools help you check what the preview shows:
- Mobile Friendly Test: get Lighthouse mobile scores and usability issues for a URL.
- Page Speed Checker: measure performance and Core Web Vitals.
- Website Reviewer: audit SEO, SSL, compression, security headers, meta tags and page size.
- Get Source Code of Webpage: read the HTML, including the viewport tag.
- Website Screenshot Generator: capture an image of a page.
Frequently Asked Questions (FAQs)
What is a screen resolution simulator?
A screen resolution simulator previews how a website looks at a chosen screen size. Kwebby's version loads the page in a frame set to a width and height you pick, from presets or a custom size. It checks layout, not the device itself.
How do I test my website at different screen sizes?
Enter the URL in Kwebby's Screen Resolution Simulator and click Preview. Then click a preset or use Custom to type a width and height. Try 320 to 375 pixels first, then the sizes between your breakpoints.
Which screen sizes should I test?
Start at 320 to 375 pixels wide, then check the sizes your visitors use. StatCounter's September 2026 data lists 1920 by 1080, 414 by 896, 360 by 800, 384 by 832, 1536 by 864 and 390 by 844 as the most common. Add tablet and laptop widths such as 768 and 1280.
Why is my website blank in the preview?
Some sites tell browsers not to show their pages inside frames. MDN describes the X-Frame-Options header with DENY or SAMEORIGIN, and notes that the CSP frame-ancestors directive is the modern option. Open the page in its own tab or use Chrome DevTools instead.
Can I use it as a responsive design tester?
Yes, for layout checks. Because the page loads in a frame of the size you choose, its CSS media queries respond to that width. The tool does not emulate a mobile user agent, pixel density or touch, so finish with DevTools device mode or a real device.
Is the screen resolution simulator free?
Yes. Kwebby's simulator is free and needs no account.
Final Thoughts
Kwebby's Screen Resolution Simulator gives you a fast look at a page at the sizes your visitors use. Check narrow widths first, step through the sizes between presets and remember that a frame tests layout only. Confirm the viewport tag, then finish on DevTools device mode or a real phone. Browse more Kwebby tools to test speed, mobile usability and page basics.