Screen Resolution Test: Free Viewport Check

A screen resolution test shows how a website looks at one specific viewport size. With this screen resolution test, you enter a URL, pick a phone, tablet or desktop preset (or type a custom width and height), and view the page at that size, so you can catch layout problems before your visitors do.

What Is Screen Resolution, and What Is a CSS Viewport?

Screen resolution is the number of pixels a display shows, written as width x height, such as 1920 x 1080. A CSS viewport is the width and height your browser gives a web page to lay itself out in, and it is the number your responsive styles actually react to.

The two numbers often differ. A modern phone may have a physical panel of 1170 x 2532 pixels, but it reports a CSS viewport of only 390 x 844 because of pixel density scaling. Your stylesheet never sees the physical pixels, only the CSS viewport. That is why this tool works in CSS viewport sizes, and why a "375 x 667" preset is a stand-in for a phone class, not a copy of one specific device.

Responsive layouts change at breakpoints, which are viewport widths where the CSS switches rules. A navigation bar may collapse into a menu button below 768 pixels, or a three-column grid may stack into one column below 600. Testing several widths is how you confirm those switches happen where you intended.

How to Use the Screen Resolution Test

You can preview a page in under a minute by choosing a URL and a size, then submitting the form. Here is the full flow:

1. Type or paste the page address into the Website URL field. The placeholder shows the format, https://example.com. If you leave off http or https, the tool adds https for you.
2. Pick a size from the Mobile, Tablet or Desktop groups. The default is Standard, 1024 x 768.
3. For a size that is not listed, select the Custom option and fill in Width and Height. Width accepts whole numbers from 100 to 7680, and height accepts 100 to 4320.
4. Submit the form. The result area shows a heading such as "Requested CSS viewport: 375 x 667 px" with the full address you entered.
5. If an inline preview appears, inspect the page there. If you see the notice that an embedded preview is unavailable, click Open in window to open the site in a new window sized to your request.
6. If the window is blocked, use the Open in a regular tab link and your browser's own responsive design mode instead.

Which Preset Sizes Are Available?

The tool offers fifteen presets across three device groups, plus a custom option. Each size is a CSS viewport, so treat the device names as handy labels.

A practical starting set is 375 x 667 for small phones, 768 x 1024 for portrait tablets, 1366 x 768 for common laptops and 1920 x 1080 for full desktop monitors. That covers the narrowest, the mid-range and the widest layouts most sites need to handle.

Worked Example: Checking a Store Page on a Small Phone

Say you run an online shop and just redesigned a category page. You enter https://example.com/shoes in the URL field and select the iPhone SE preset, 375 x 667.

After you submit, the result heading reads "Requested CSS viewport: 375 x 667 px". The page is not one of the sites that can be shown inline, so the tool displays the unavailable notice. You click Open in window, and the site opens in a window requested at 375 pixels wide and 667 tall.

Now you inspect it. The main menu should have collapsed into a button. The product grid should show one or two columns. No horizontal scrollbar should appear. If the price badge overflows the card and forces sideways scrolling, you have found a bug at a width where many real visitors browse.

Next, run the same URL at 768 x 1024. A stylesheet rule such as min-width: 768px applies at exactly 768, so the layout should jump to the tablet design here. If it still looks like the phone version, your breakpoint is set too high. Then try a custom width of 767 to see the last pixel of the mobile layout.

How to Read the Result and Fix What You Find

A good result means the content fits the width, text stays readable and every control is reachable. Check each of these when the page opens at your chosen size:

Horizontal scrolling

If you can scroll sideways at 375 or 360 pixels, something is wider than the viewport. Common causes are fixed-width images, wide tables and long unbroken strings. Fixes include max-width: 100% on images and wrapping tables in a scrollable container.

Text size and tap targets

Body text around 16 pixels is a widely used baseline on phones. Buttons and links should be large enough for a thumb, and a common guideline is roughly 44 to 48 pixels. If links sit tightly together in a footer, add padding or spacing.

Navigation and key content

The menu, search and main call to action should be visible or one tap away at every size. If a hero image pushes the headline below the first screen on 360 x 800, shrink the image height on small widths.

Wide screens

At 1920 x 1080 and 2560 x 1440, check that line lengths are not stretched across the whole screen. Many designers cap the main text column at a readable width and center it, so paragraphs do not run edge to edge.

Who Benefits From a Screen Resolution Test?

Anyone who ships web pages benefits, because a layout that works on one screen can break on another. Specific situations include:

• Site owners checking a new theme or landing page before a campaign launch.
• Designers and front-end developers confirming that breakpoints trigger at the intended widths.
• SEO specialists reviewing mobile usability, since Google's Search Central documentation says it primarily uses the mobile version of content for indexing and ranking.
• Agencies showing a client how their page looks on a phone, a tablet and a monitor in one meeting.
• Content editors checking that a new table, embed or image block does not break the page on narrow screens.

For a wider check of your page's health, browse the website audit and performance tools and run them alongside this preview.

Best Practices, Common Mistakes and Troubleshooting

The most reliable approach is to test a spread of widths, not a single device. Start at the narrowest preset, move up through tablet, and finish on a large desktop size.

• Include the full address. Enter a complete public http or https URL. Addresses with a username in them, or sites that cannot be reached publicly, are rejected with an error message.
• Keep sizes in range. If you see the message about a width from 100 to 7680 and a height from 100 to 4320, adjust your custom numbers. Decimals are not accepted.
• Select Custom on purpose. Clicking into the width or height fields selects the custom option automatically, but a preset you picked earlier is then ignored.
• Blank inline preview? The site may forbid being embedded in other pages. That is a choice made by the site you are testing, so use Open in window instead.
• Window not opening? Pop-up blockers stop new windows. Allow pop-ups for this page, or use the regular tab link.
• Window size looks slightly off? Browsers add their own toolbars and scrollbars, which can reduce the real viewport a few dozen pixels below your request.

Layout is only one part of mobile quality. If you run AMP pages, validate them with the AMP checker. To make sure images stay accessible when they resize or stack, scan them with the image alt text checker. Slow pages hurt small-screen visitors most, so review GZIP compression and your HTTP/2 and HTTP/3 support as well.

Limitations to Keep in Mind

This tool requests a CSS viewport size. It does not emulate a real phone. It does not set a device pixel ratio, mimic touch input, swap in a mobile user agent or reproduce the fonts and browser quirks of iOS or Android.

Inline previews appear only for a small set of sites, such as Google and YouTube pages. For nearly everything else you work in a separate window or tab, so the experience is closer to resizing your own browser than to a device lab. A site that sends different HTML to mobile user agents may therefore look different on a real phone than in a resized desktop window.

The tool also does not report your own screen resolution. If you want that number, open your computer's display settings: Settings, System, Display on Windows, or About This Mac and Displays on a Mac. For final sign-off on an important launch, confirm the layout on at least one real phone and one real tablet. For related checks, you can also review how your server responds with the HTTP header checker.

Running a screen resolution test takes only a URL and a size, and it quickly shows whether your layout holds up from a 360 pixel phone to a 2560 pixel monitor. Enter your page address above, pick a preset, and open it at that viewport to see what your visitors see.