What is screen and viewport information?
Every browser exposes a screen object and a viewport. screen.width and screen.height report the display in CSS pixels, while innerWidth and innerHeight report the current viewport — the part you actually see, toolbars excluded. devicePixelRatio says how many physical dots map to one CSS pixel, and colorDepth says how many bits describe each pixel.
Worked example: a laptop with a 2560x1600 physical panel at devicePixelRatio 2 reports screen.width=1280 and screen.height=800 CSS pixels — the size you would target in a media query. colorDepth 24 means 8 bits per channel, so 2^24 = 16,777,216 colours. When innerWidth is greater than innerHeight the device is in landscape orientation; swap them and it is portrait.
How to read the screen report
- Open the page — the tool reads the values from your browser instantly and uploads nothing.
- Compare the screen size with the window size to see how much room the toolbars take.
- Check the device pixel ratio to know whether assets need Retina-quality variants.
- Watch the numbers update live as you resize the window or rotate the device.
Screen and viewport — frequently asked questions
What is the difference between screen size and window size?
screen.width reports the whole display in CSS pixels, while innerWidth reports only the visible viewport, so toolbars and side panels make it smaller. Media queries react to the viewport, not the screen.
What does device pixel ratio mean?
It is the number of physical pixels per CSS pixel. A ratio of 2 (common on Retina and many phones) means a 10px border paints 20 physical pixels, so images should be supplied at 2x to stay sharp.
Why is colour depth usually 24 or 30?
24 bits means 8 bits per red, green and blue channel — 16,777,216 colours. 30-bit and 10-bit-per-channel panels add finer gradients for HDR, but the reported value can be capped by the browser or driver.
