Screen Info
Your live screen, viewport, and device values at a glance
-
Aspect Ratio: -
-
-
Updates live as you resize the window
-
-
-
-
-
-
Instantly see your screen resolution, live viewport size, devicePixelRatio, color depth, orientation, touch support, language, and timezone — all read locally from your browser with no uploads. The viewport and orientation values update in real time as you resize the window, making this a handy companion for responsive design testing and quick device checks.
How to Read the Cards
Nine cards populate automatically when the page loads; there is nothing to type or paste. R shows screen resolution with its simplified aspect ratio, A the available size, V the live viewport, P the device pixel ratio, C the color depth, O the orientation, T touch support, L the browser language, and Z the IANA timezone.
The viewport and orientation cards are the only live ones: they recompute on every window resize. The rest describe the display and environment and stay fixed unless the window moves to a monitor with different characteristics. Everything is read from the standard window, screen, and navigator objects, so no network request is involved.
The color depth card reports bits per pixel — 24-bit is the common true-color value, while 30-bit or 32-bit signals a wider-gamut or HDR-capable setup. The language card is the browser’s top Accept-Language preference, useful for spotting why a page served German to someone who expected English, and the timezone card is the IANA zone the Intl API will use for date formatting on that device.
Practical Tips
- Responsive testing: Drag the window edge and watch the viewport width cross your breakpoints. This catches rules that fire at the wrong CSS width under OS scaling.
- HiDPI assets: Read DPR before choosing between 1x, 2x, and 3x image variants, and remember the CSS slot size is what
srcsetmeasures against. - Bug reports: Paste the exact resolution, viewport, DPR, and OS scaling so a layout issue can be reproduced instead of guessed at.
- Cross-device QA: Compare orientation and touch results on a laptop, tablet, and phone side by side.
- Localization checks: Confirm the language and timezone a page will see before blaming a formatting bug on your code.
Resolution vs Available Size vs Viewport
These three numbers describe different rectangles, and mixing them up causes real bugs.
The screen resolution is what the display reports in device-independent pixels. The available size subtracts OS-level UI such as the Windows taskbar or the macOS menu bar and Dock from the full screen — it is the largest area a maximized window can occupy. The viewport is smaller still: it is the drawable area inside the browser window, and it is the only one CSS media queries can measure.
A maximized window on a 1920 × 1080 Windows display with a 40-pixel taskbar reports an available height of 1040, and the viewport is smaller again because of the browser chrome. A responsive layout must target the viewport, which is why this tool keeps that value live while showing the hardware figures alongside it.
devicePixelRatio and Asset Selection
devicePixelRatio (DPR) is the number of physical pixels that back one CSS pixel. A value of 2 means a Retina-class display where a 1440 × 900 CSS area is drawn on 2880 × 1800 physical pixels. A value of 1.25 comes from 125% OS scaling on a standard-density panel.
For images, DPR determines the source you should serve: a 400-pixel-wide display slot needs a 400-pixel asset at DPR 1, an 800-pixel asset at DPR 2, and a 1200-pixel asset at DPR 3. Browsers use this ratio when resolving srcset, so a correctly authored srcset with 1x, 2x, and 3x candidates lets the browser pick the sharpest reasonable file on its own.
Worked Example: A Retina Laptop and a Scaled Windows PC
On a 13-inch laptop with a 2560 × 1600 panel running at DPR 2, the cards report screen 1280 × 800, aspect 8:5, and physical 2560 × 1600 after multiplying by the ratio. If the maximized viewport is 1280 × 720, the orientation is landscape and a @media (max-width: 768px) rule does not fire, but a max-width: 1200px rule does.
On a 1920 × 1080 Windows machine at 125% scaling, the cards report screen 1536 × 864 with DPR 1.25. The same 768-pixel media query still does not fire, even though the monitor is larger than the laptop’s — because the query sees CSS pixels, not the panel. Changing the OS zoom to 150% drops the reported width to 1280 and can suddenly trigger tablet breakpoints, which is a common cause of “it looks different on my colleague’s machine” reports.
Accuracy and Limits
The values are exactly what the browser exposes, and browsers intentionally limit detail to reduce fingerprinting. Some browsers round screen dimensions or restrict them under strict privacy settings, so a reported resolution can be approximate. Browser zoom alters the viewport and DPR, so zoom back to 100% before trusting the numbers.
Touch detection is a capability check with known false positives on touchscreen laptops; it does not tell you whether a finger is the primary pointer. The language card shows navigator.language, the user’s top preference, not the full ordered list. The timezone comes from the Intl API’s resolved zone and is usually an IANA name, though some platforms return an alias. Finally, the available size is not a guarantee that a window can actually reach it — window managers can reserve additional space.
Related Tools
Frequently Asked Questions
Why is my viewport smaller than my screen resolution?
Screen resolution is the whole panel (screen.width × screen.height), while the viewport is the drawable area inside the browser window that renders the page. Toolbars, the tab strip, scrollbars, a docked developer-tools panel, and the window border all reduce it. Resize the window and the viewport card updates live.
Why does a 1920 × 1080 laptop report a viewport near 1536 × 864?
That machine is likely running Windows at 125% scaling, so the browser works in device-independent pixels and devicePixelRatio is 1.25. Dividing 1920 by 1.25 gives 1536. The panel is physically 1920 pixels wide, but CSS sees 1536 of them.
Why does the aspect ratio show 683:384 instead of 16:9?
The ratio is reduced by the greatest common divisor of the exact pixel dimensions, not rounded to a familiar label. A 1366 × 768 panel has a GCD of 2, producing 683:384. 1920 × 1080 reduces to 16:9, and 1920 × 1200 reduces to 8:5, which is the same as 16:10.
Why does my touchscreen laptop report touch support even when I use a mouse?
Touch is reported when any one of three signals is positive: navigator.maxTouchPoints above zero, the presence of ontouchstart, or a coarse primary pointer. A 2-in-1 with a touchscreen satisfies the first even if the mouse is your main input, so treat the result as capability, not as the active input method.
Is the orientation card based on the device sensor or the window shape?
It is derived from the live viewport dimensions, so it flips to portrait only when the drawable area becomes taller than it is wide. A square viewport counts as landscape. This differs from a phone's gravity sensor, which can report portrait even when the page is laid out in a wide window.
Why is my screen.width lower than my monitor's advertised resolution?
On HiDPI displays the browser reports device-independent CSS pixels. A 2880 × 1800 panel with devicePixelRatio 2 reports screen.width 1440 and screen.height 900. Multiply the reported values by the pixel ratio to recover the physical resolution.
Reviewed by the HandyTools Hub team · Last updated