Detect screen width, height, pixel ratio, viewport size, and orientation live with copyable values to debug responsive layouts accurately offline.
Part of our Developer Tools collection — Explore more Developer Tools tools · See also: JSON Formatter, Base64 Encode / Decode.
Quick answer: Screen Resolution — Detect screen metrics Free, no signup, runs in your browser. See below for the interactive tool, 4-step guide and FAQs.
Reviewed by the Tool4SaaS Editorial Team — In-house reviewers who build and test every tool locally for accuracy across current Chrome, Edge, Firefox, and Safari. Last updated: . See our authors, methodology or contact us.
It reveals live hardware pixels, CSS viewport, devicePixelRatio, color depth and orientation updating during resize. For illustration, a 1920 by 1080 monitor reports 1903 by 937 viewport at full zoom, while a 390 by 844 handset reports 3x density portrait. Copy values with one click for specifications, tickets, or media queries.
No. Measurement reads window dot screen and innerWidth solely inside this tab with zero transmission. For instance, 2560 by 1440 desktop or 390 by 844 phone figures remain resident. Nothing is stored or sent anywhere; close the tab and everything is gone. Share strings like 390x844 at 3x only when filing voluntary bug reports.
Because viewport subtracts browser chrome, sidebars, devtools and zoom scaling from hardware pixels. For example, 1920 by 1080 hardware yields 1903 by 937 viewport at full zoom, narrowing to 1536 wide at 125 percent zoom. Rotate handsets to flip 390 by 844 portrait into landscape while density stays constant, clarifying breakpoint behavior.
Test folded and unfolded postures, portrait and landscape rotations and 100 through 200 percent zoom to expose reflow faults. For example, 390 by 844 portrait collapsing to narrow split view may hide navigation. Record viewport, density and orientation triplets per case, automate screenshots across breakpoints, and verify touch targets exceed 44 pixels for accessible operation.
DevicePixelRatio maps CSS pixels to physical pixels, so a 390-pixel CSS layout at 3x renders 1170 hardware pixels across. For illustration, a 300-pixel logo needs a 900-pixel source to stay crisp on retina phones. Export responsive images at 1x, 2x and 3x densities, then verify edges in device labs.
This readout exposes hardware width and height, layout viewport, pixel density and orientation for the device in hand. Example 1: 1920 by 1080 monitor at full zoom reports 1903 by 937 viewport after chrome subtraction. Example 2: phone reports 390 by 844 at 3x density portrait for precise breakpoint work. Designers debug media queries, QA files reproducible tickets and bloggers verify screenshots. Live updates track resizing, zooming and rotation without reloads. One-click copying accelerates specs, standups, and client communication across responsive projects with trustworthy numbers.
Reference metric table: hardware 1920 by 1080 fixed | viewport 1903 by 937 at full zoom | viewport 1536 wide at 125 percent zoom | phone 390 by 844 portrait | density 3x means triple physical pixels | orientation flips on rotate. The page samples screen object for hardware, innerWidth and innerHeight for layout and pixel ratio for density. Edge case: mirrored displays and OS scaling report logical rather than physical pixels, misleading screenshot math. Zoom, sidebars and devtools shrink viewport while hardware stays constant, explaining most mismatch confusion for newcomers.
Open panel on phone, note 390 by 844 at 3x portrait, rotate to landscape, watch orientation flip while density holds steady. Second trial: zoom desktop to 125 percent, observe 1920 width contracting toward 1536 viewport. Limitation: software reporting only, so virtual machines, mirrored docks and odd scaling skew figures. For color accessibility after layout, see the checker at /color-contrast for ratio validation. For shadow depth cues, see the builder at /gradient-generator for elevation styling.