Browser Viewport Size Simulator
Look up the CSS viewport size, device pixel ratio, and physical resolution for common phones, tablets, and desktops — with portrait/landscape and a scaled preview. Runs in your browser.
iPhone 12/13/14
- CSS viewport
- 390 × 844 px
- Device pixel ratio
- 3×
- Physical resolution
- 1170 × 2532 px
- Orientation
- Portrait
CSS viewport is what your media queries and layout see; multiply by the device pixel ratio for the physical screen resolution. Values align with Chrome DevTools device presets.
About this tool
When you write responsive CSS, the number that matters is the CSS (logical) viewport size, not the device's physical pixel count — a phone advertised as 1170 physical pixels wide actually reports a 390px CSS viewport because its device pixel ratio is 3. Confusing the two is a common cause of media queries that fire at the wrong breakpoint. This simulator lists the CSS viewport width and height, the device pixel ratio (DPR), and the resulting physical resolution for a curated set of popular phones, tablets, and desktop sizes, with values aligned to Chrome DevTools' device presets so they match what you would test against in the browser's device toolbar. Toggle portrait and landscape to swap the dimensions, and use the scaled outline to picture the shape. It is a quick reference for choosing breakpoints and sanity-checking a layout, complementing — not replacing — real device testing. Everything runs locally.
How to use it
- Pick a device from the dropdown.
- Read its CSS viewport size — that's what your media queries target.
- Note the device pixel ratio; multiply to get physical resolution for image assets.
- Toggle landscape to see the rotated dimensions.
Frequently asked questions
- What is the difference between CSS viewport and physical resolution?
- The CSS viewport is measured in logical (CSS) pixels — what layout, media queries, and viewport units use. Physical resolution is the actual pixel grid. They are related by the device pixel ratio: physical = CSS × DPR. A 390px-wide CSS viewport at DPR 3 is 1170 physical pixels.
- Which number do I use for media queries?
- The CSS viewport width. A breakpoint like @media (max-width: 600px) compares against CSS pixels, so a 390px-CSS phone matches it regardless of having far more physical pixels.
- Why does device pixel ratio matter for images?
- To look sharp on a high-DPR screen, raster images need more physical pixels than their CSS size — typically 2× or 3× — which is what srcset and the x descriptors provide. The DPR tells you how much detail the screen can actually show.
- Are these exact for every unit of a model?
- They match Chrome DevTools' device presets, which are the standard reference for responsive testing. Real devices can vary slightly with OS version and browser chrome (address bars change the visible height), so treat them as accurate reference values, not pixel-perfect guarantees.
- Why does landscape just swap width and height?
- Rotating the device exchanges the viewport's width and height; the DPR stays the same. Note that on phones the browser UI differs between orientations, which can change the visible viewport height a little in practice.
- Does this replace testing on real devices?
- No — it is a reference for dimensions and DPR. Always verify critical layouts on real hardware or the browser device toolbar, since touch behavior, safe-area insets, and dynamic browser chrome are not captured by dimensions alone.