The viewport is the visible area of the page in the browser, measured in CSS pixels. It changes when resizing the window, opening sidebars, changing zoom or rotating the device.
Carregando ferramenta… / Loading tool…
See viewport, resolution, DPR, estimated physical pixels and orientation
Browsers work with CSS pixels, a logical unit used for layout, not with the panel's physical pixels. The bridge between the two is the devicePixelRatio (DPR): on a standard screen, 1 CSS pixel equals 1 physical pixel (DPR 1); on HiDPI/Retina screens, each CSS pixel covers 2, 3 or more physical pixels, which makes text and images sharper without changing the apparent size. This tool reads the viewport in CSS pixels (window.innerWidth/innerHeight), the screen dimensions (screen.width/height), the DPR, the orientation and the color depth, and estimates physical pixels by multiplying CSS pixels by DPR. That is why the resolution reported by a web page can differ from the nominal resolution of a monitor or phone, page zoom, system scaling and the DPR itself change that relationship.
Web layout is always measured in CSS pixels, a logical unit designed to keep sizes consistent across very different screens. The panel, however, has a grid of physical pixels, and the devicePixelRatio is the number that converts one into the other: physical pixels ≈ CSS pixels × DPR. That is why two devices with the same CSS viewport can have very different physical pixel counts.
The tool reads each value from a specific API: window.innerWidth/innerHeight for the viewport, screen.width/height for the screen, window.devicePixelRatio for the DPR, screen.orientation for orientation and screen.colorDepth for color depth. The physical screen is an estimate (CSS × DPR), because the browser may round values or hide details for privacy.
Example 1, HiDPI phone: a smartphone may report a viewport of 390 CSS pixels wide with DPR 3. The estimated physical screen is 390 × 3 = 1170 pixels wide. CSS sees 390 for layout, but the panel uses 1170 real pixels to render sharply, which is why the image looks 'finer' than on a desktop with the same CSS width.
Example 2, standard monitor: a 1920×1080 desktop with DPR 1 shows viewport and physical screen nearly equal (minus browser bars). If you apply 125% page zoom, the CSS viewport shrinks and the effective DPR rises, watch the numbers change live as you press Ctrl+ and Ctrl-.
The practical lesson for responsive design: CSS media queries respond to the viewport in CSS pixels, not to the physical pixel count. A phone with millions of physical pixels still has a narrow CSS viewport (around 360–430 px), so that is the number that decides whether the mobile layout kicks in. Confusing the two is the classic cause of 'my site breaks on mobile even though the screen is huge'. The available area, in turn, excludes permanent system bars and docks.
On privacy: all values are read locally and shown only to you. The tool does not collect canvas, fonts, audio or invasive combinations, and it does not send the measurements to analytics, resolution and DPR alone do not uniquely identify your screen.
Paste the code into your HTML and the tool shows up on your page, without J-Kit's navigation and ads. It still runs in the browser of whoever visits your site.
<iframe
src="https://jkit.tools/embed/en-US/screen-resolution-checker"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Screen Resolution Checker"
></iframe>These references help contextualize formulas, standards, APIs and limitations used on this page. They do not replace professional validation when a result has legal, financial, medical or operational impact.
The viewport is the visible area of the page in the browser, measured in CSS pixels. It changes when resizing the window, opening sidebars, changing zoom or rotating the device.
Measurements are read locally through browser APIs and do not uniquely identify your screen.