Screen Resolution Simulator Box: Preview Any Device Size
Screen Resolution Simulator Box. Pick a Resolution preset and click Load Page in Box in this screen resolution simulator to preview any page at that size. The pixel ruler online works out the exact figure live as you type, with the formula shown alongside the result.
Interactive Tool
The web page to load inside the box. Some sites block being shown inside another page.
The Screen Resolution Simulator draws a box at the exact pixel size of whatever resolution you pick from the preset dropdown (or type into the custom width and height fields), so you can see how large that resolution actually is against your own screen rather than just reading two numbers. When the target is bigger than your browser can show, the box scales down to fit and the scale factor is printed clearly rather than quietly lying to you, and you can turn on compare mode to overlay a second resolution box on top of the first.
Before you ship a redesign, the screen resolution simulator box lets you see your website the way a phone, tablet or laptop would draw it, without owning any of them. Paste a link, pick a width and height, and this webpage screen resolution simulator shows the page at that exact size, scaled down so it fits on your own screen.
What the Screen Resolution Simulator Box Shows You
A screen resolution simulator loads a live web page inside a frame set to a chosen size, so the page's CSS responds as if it were open on that device. You enter a URL, choose a size, and the frame shows what that size triggers on your website: the menu style, the column count, the image crops and the line lengths.
That makes it a quick first check for any web developer or designer who needs to know how one website behaves on different devices, and how it holds up across different screen resolutions. It answers the "does it fit?" question in seconds. What it can't reproduce is the feel of a real touchscreen or a real phone processor, which is why it sits at the start of a testing routine rather than at the end.
How to Use the Screen Simulation Tool Step by Step
The screen simulation tool needs only a link and a size. Here is the order that works best: Use the device screen size database online to see concrete figures before you rely on a single spec sheet.
- Copy the address of the web page you want to check and paste it into the URL field.
- Choose a preset size for mobile, tablet or desktop devices, or pick the custom resolution option and type your own numbers.
- Set the orientation. Portrait keeps the taller side vertical; landscape swaps width and height.
- Click the button to load your website and look for anything cut off, overlapping or too small to read.
- Run the same resolution simulation again at a second size so you can compare the two results side by side.
Because the frame is drawn on your own computer, a website that blocks embedding (some banking and login pages do) may refuse to load. That's a security header on the site, not a fault in the simulator.
How the Screen Resolution Simulator Box Scales a Viewport
A phone page is 390 units wide, but a desktop page might be 1,440. The resolution simulator keeps the page at its true size internally, then shrinks the picture so the whole thing fits inside the preview area. The arrangement of the page never changes when it scales; only the size of the picture does.
The Scale Formula Behind the Preview
The preview takes the smaller of two ratios, so neither side spills out, and never enlarges a page past 100%:
$$\mathrm{scale} = \min\left(\frac{W_{box}}{W_{page}},\ \frac{H_{box}}{H_{page}},\ 1\right)$$The drawn size is then \(W_{page} \times \mathrm{scale}\) by \(H_{page} \times \mathrm{scale}\). The shrink is a transform applied to the frame, so text stays crisp.
Worked Example: One Phone and One Laptop
Say your preview area is 860 × 560. You test two sizes of your website in the screen resolution simulator tool:
- Laptop, 1440 × 932: width ratio 860 ÷ 1440 = 0.5972, height ratio 560 ÷ 932 = 0.6009. The smaller wins, so the page is drawn at 59.7%, filling 860 × 556.6.
- Phone, 390 × 844: width ratio 2.2051, height ratio 0.6635. The page is drawn at 66.4%, as a 258.8 × 560 strip.
Turn that phone to landscape (844 × 390) and both ratios pass 1, so it's shown at full size. Behind the phone's 390 × 844 size sit 1170 × 2532 hardware dots at a ratio of 3, or 2,962,440 total pixels, with a tall shape of about 19.5:9 rather than the 16:9 of most monitors.
Screen Resolution Tool Basics: Physical vs Logical Pixels
Every screen resolution figure you type into a screen resolution tool is a browser size, not a hardware count. Knowing the difference saves a lot of frontend confusion.
Physical Resolution and Native Pixels
Physical resolution is the count of dots built into the panel. It's fixed by the hardware and is also called the native resolution. Running a panel below it makes text look soft, because one image dot no longer lands on one panel dot.
Logical Resolution in CSS Pixels
Logical resolution is the screen resolution the operating system reports to the browser after scaling. Your CSS works in these units, so it's the number your breakpoints test and the number a simulator should be given.
Device Pixel Ratio, DPR and High DPI Screens
The device pixel ratio links the two: physical width ÷ logical width. A DPR of 2 means each logical unit is painted by a 2 × 2 block of hardware dots. Retina panels and other high DPI mobile devices use this, together with display scaling in Windows or macOS, to keep small type readable.
Common Screen Resolutions for Each Resolution Simulation
Testing every size that exists isn't necessary. A short list of common screen resolutions covers the devices most visitors use, from HD up to 4K.
Phones, Tablets and Other Mobile Devices
- Small smartphones, including the base iPhone and many Android phones: about 360 to 390 units wide
- Large mobile phones: about 412 to 430 wide
- Tablets in portrait, such as an iPad: 768 x 1024 and up
Test mobile first, since phones send the majority of visits to most websites.
Laptops and Desktop Monitors
- 1280 x 720: entry-level notebooks
- 1366×768: budget laptops
- 1920 x 1080: Full HD, the most common desktop size
- 2560×1440: QHD screens
- 3840×2160: 4K panels, usually scaled to 150% or 200%
A 4K monitor reports a smaller size to the browser because of that scaling, so check what the page actually sees.
Screen Size and Aspect Ratio in a Screen Resolution Tester
Screen size is the physical diagonal in inches; screen resolution is the dot count. Put the same resolution on a smaller panel and you get more pixels per inch (PPI), which means more sharpness and better image quality. A 6.1-inch phone and a 24-inch monitor can share a browser width while looking completely different, so a screen resolution tester only tells you about arrangement, never about how sharp a page looks.
Rotation and Orientation Changes
Width divided by height gives the shape of the screen. Rotating one of your devices flips it, and many pages break only on the flip, so testing both ways is a must. A wide 21:9 monitor and a tall 19.5:9 phone stress opposite parts of a website.
Catching a Pricing Table Overflow in the Simulator Box
I'm signing off a landing page whose centrepiece is a four-plan pricing table, and the question is simple: does it survive on the phone most visitors use, or does it need a mobile redesign before launch? It needs the redesign: the table needs 576 px of width and the phone offers 393.
The analytics report gives me the top phone size: 393 × 852. The stylesheet gives me the table's minimum: four columns with a min-width of 132 px each, plus 24 px of padding on each side, so 4 × 132 + 48 = 576 px.
I paste the staging URL into the box and type 393 × 852 as a custom size. The preview area is 860 × 560, so the box draws the page at min(2.1883, 0.6573, 1) = 65.7%, a 258.3 × 560 strip. Scrolling to the pricing block, the fourth plan is cut in half and a horizontal scrollbar sits under the table: 576 − 393 = 183 px of overflow, so only 68.2% of the table is visible at once.
Then I rerun with one input changed at a time:
- 320 × 693, the width WCAG 2.1's Reflow rule (1.4.10) uses as its test case: 256 px of overflow.
- 852 × 393, the same phone in landscape: drawn at 100%, and the table fits with 276 px to spare.
So the break-even width is exactly 576 px. I cross-check it in DevTools: at 575 px the scrollbar appears, at 576 px it's gone. The fix I hand to the developer is a named one: below a 600 px breakpoint, stack the four plans as cards. That leaves a 24 px margin over the break-even width for fonts that render slightly wider.
One caveat I'd weigh before trusting any result near a breakpoint. On Windows, the box's frame shows a classic scrollbar about 17 px wide, which narrows the space the table can use while media queries still read the full width. Phones use overlay scrollbars, so they don't lose that space. Any result within roughly 17 px of a breakpoint stays unconfirmed until it's checked on a real phone.
Data tables are exempt from the Reflow rule, so this table wouldn't technically fail it. I'd still fix it, because a price the reader can't see is a price the reader can't compare.
Responsive Design Breakpoints to Check With a Simulator Tool
Responsive design changes the page at set widths called breakpoints. The simulator lets you sit one unit either side of each breakpoint, which is where most bugs hide. Typical values sit near 768, 1024 and 1200, but your own stylesheet sets the real ones, so test the screen sizes your CSS actually uses on real phones and other devices, rather than a generic list of screen sizes.
Viewport Meta Tag and Media Queries
Without the width=device-width viewport meta tag, phones render a page at a desktop width and shrink it. With it, media queries fire at the real width. A mobile-first approach to responsive design starts from the smallest arrangement and adds rules as the width grows.
Fixing Overflow You Spot in the Box with Flexbox
When the box shows a row of columns spilling past the frame at one width, flexbox or grid is usually the fix: let the columns wrap instead of overflow, and pair them with max-width: 100% on media so nothing on your website pushes past its container. Then reload the same size in the box to confirm.
Layout Issues a Responsive Checker Catches
A responsive checker earns its keep by exposing layout issues before mobile visitors do. These are the visual bugs to scan for in the simulator box preview at each size:
Navigation Menus and Horizontal Scrolling
- Navigation menus that wrap onto two lines or hide links
- A hamburger icon that never opens, or opens off-screen
- Horizontal scrolling caused by one fixed-width element
Images, Text and Zoom Problems
- Images that stretch, crop badly or overflow their column
- Text set in fixed units, so font sizes are tiny on mobile
- Pages that break when the reader uses zoom
The box shows layout, not which file loaded. Responsive images with srcset send a smaller file to small screens and a sharper one to 4K displays, so check which one was served in the network panel.
Why Screen Resolution Testing Matters for SEO
Google indexes the mobile version of a website first, so a page that breaks in the simulator box at a phone width is the version its crawler sees. That makes screen resolution testing part of SEO, not only design. A broken phone layout gives a poor user experience, search engines measure that user experience through field data, and higher bounce rates on mobile mean fewer conversions and weaker SEO signals. Good SEO and good mobile testing are, in practice, the same job.
Core Web Vitals and Cumulative Layout Shift
Elements that jump as a page loads hurt the cumulative layout shift score, one of the Core Web Vitals. Unsized images and late-loading banners are the usual cause, and they often only jump at certain widths. Reloading the page in the box at each size lets you spot those width-specific jumps, but the score itself has to come from Lighthouse or field data.
Real Devices vs Emulators for Screen Resolution Testing
Emulators and simulators copy the screen size of devices in software. They're fast and free, and they catch nearly every arrangement problem. Real devices add what software can't copy: touch accuracy, real processor speed, the on-screen keyboard and browser quirks. A sensible routine is screen resolution testing in a simulator for every change, then a final round of testing on two or three real devices before launch.
Cross-Browser Testing in DevTools
Once the box shows a layout works at a given size, the device mode built into Chrome, Firefox, Safari and Edge is the next step; set it to the same browser window size you used in the box for cross-browser testing, since font rendering and form controls vary between browsers.
Checking Your Own Display With a Responsive Tool
A responsive tool that reads your own screen reports the values your device exposes: width, height, DPR and rotation. In JavaScript the same numbers come from:
screen.width, screen.height, window.devicePixelRatioThose reported numbers are useful in two ways. Your own dimensions make a good custom size to enter in the simulator box, and they explain why the preview is scaled: the box can never be wider than your own screen. If the reported size is much lower than your display's spec, your system scaling is set above 100%.
What the Box Ignores: Refresh Rate and Color Depth
The refresh rate and color depth a display tool reports don't change what the simulator box shows, because neither affects how a page is arranged at a given resolution.
Frequently Asked Questions
- What does a screen resolution simulator do?
- It loads a web page inside a frame set to a chosen width and height, so the page's CSS responds as it would on that device. You see the menu style, column count and image crops that size triggers, scaled down to fit your own screen.
- How do I check my website at a different resolution?
- Enter the page URL, pick a device preset or type a custom width and height, and run the simulator. Repeat at a second size, and rotate the screen, so you can compare portrait and landscape layouts.
- Should I use a simulator or a real device for screen resolution testing?
- Use both. A simulator is fast and free and catches almost every layout problem. Real devices add touch accuracy, real processor speed, the on-screen keyboard and browser quirks, so do a final check on two or three of them before launch.
- Why doesn't the size I see match my phone's advertised resolution?
- Phones and high-DPI laptops report a logical (CSS) size that is the physical resolution divided by the device pixel ratio. A phone with 1170 hardware pixels across at a ratio of 3 lays pages out at 390 CSS pixels, and that is the size to simulate.
- Why won't some websites load in the simulator box?
- Some sites send a security header that blocks them from being shown inside a frame on another site, which is common on banking and login pages. That is a setting on the site, not a fault in the simulator.
- Is screen resolution the same as screen size?
- No. Screen resolution is the number of pixels across and down; screen size is the physical diagonal in inches. The same resolution on a smaller screen packs more pixels per inch, so it looks sharper even though the layout is identical.
- Which screen resolutions should I test?
- Cover a small phone, a large phone, a tablet in portrait, a common laptop size such as 1366 x 768 and a Full HD 1920 x 1080 desktop, then test one pixel either side of each breakpoint in your own CSS.