English
HrvatskiThese tools show what websites know about your screen: its size, the space inside your browser window, how sharp it is and how many colors it reports. Every value is measured live in your browser and updates as you resize the window, zoom or move to another monitor.
Which tool do I need?
- Screen resolution: the size of your whole display as websites see it, after display scaling.
- Viewport size: the area inside your browser window that websites use for their layout.
- Device pixel ratio: how many physical pixels your screen uses for each CSS pixel, such as 2× on Retina displays.
- Color depth: how many bits your screen uses for each pixel’s color, usually 24-bit.
CSS pixels vs. physical pixels
Websites measure everything in CSS pixels, so that text and buttons look about the same size on every screen. High-density displays draw each CSS pixel with several physical pixels. That’s why a 4K monitor or a Retina laptop reports a much smaller resolution than its specifications: multiply the screen resolution by the device pixel ratio to get the real pixel count.
When these tools are useful
- testing responsive designs at specific viewport sizes
- checking display scaling after connecting a new monitor
- choosing images and wallpapers in the right size
- describing your setup to support when a page looks wrong
For details about your browser, operating system and device, see the browser tools.