How to use it
- Open the page. The values are read from your browser immediately.
- Resize the window or rotate your device to see the viewport size and orientation update.
- Use “Copy all” to paste the details into a bug report or a support request.
How it works
Browsers report sizes in CSS pixels, the unit web pages use for layout. On high-density displays one CSS pixel is drawn with several physical pixels: the device pixel ratio (DPR) tells you how many. A phone that reports 390 × 844 with a DPR of 3 has a panel of about 1170 × 2532 device pixels. On desktop, browser zoom and operating-system display scaling both change the DPR and the CSS size, so a 2560 × 1440 monitor at 125 % scaling reports 2048 × 1152.
The screen resolution is the whole display; the available space excludes permanent operating-system bars such as the Windows taskbar or macOS menu bar; the viewport is the part of the browser window where the page is shown, without toolbars but including any scrollbar. The viewport is what CSS media queries such as min-width: 768px respond to, so it is the number to check when testing responsive layouts.
The colour scheme and reduced-motion values come from the same CSS media features that websites use to adapt to your system settings. Brands, platform and mobile come from User-Agent Client Hints, which only Chromium-based browsers provide. Some browsers deliberately round or fix these values to reduce fingerprinting, so they may not exactly match your hardware.
Examples
Testing a responsive layout
A layout breaks on a colleague's laptop. They copy the details, which show a 1280 × 649 viewport at DPR 1.5. Set your browser's device toolbar to the same viewport to reproduce the problem.
Choosing image sizes
A product image is shown 400 CSS pixels wide. On a DPR 3 phone it needs 1200 pixels to look sharp, which tells you which sizes to include in srcset.
Checking monitor scaling
A 3840 × 2160 monitor reports 2560 × 1440 with DPR 1.5: Windows is scaling the display by 150 %.
Frequently asked questions
Why does the screen resolution differ from my monitor's specification?
Browsers report CSS pixels, which are the physical pixels divided by the scaling factor. Multiply by the device pixel ratio to get close to the hardware resolution. Browser zoom also changes the reported value.
What is the difference between screen size and viewport size?
The screen size is the whole display. The viewport is only the area inside the browser window where the page is drawn, so it is smaller and changes when you resize the window or open developer tools.
Is this information used to track me?
Not by this page: the values are only displayed to you and are not stored or sent anywhere. Websites can read the same values, which is why some browsers round them to make fingerprinting harder.
Why is touch support shown on my laptop?
Touch support is based on the number of touch points the browser reports. Laptops with touchscreens report them even if you mainly use a mouse, and some drivers or remote-desktop setups report touch support without a touchscreen.
Privacy
All values are read by JavaScript in your browser and shown only to you. Nothing is stored, uploaded or included in analytics; only an anonymous event that the tool was opened and used is recorded.