IP and InternetWhy there are two sizes
Phones and modern laptops pack several real pixels into the space where older screens had one. If a web page used real pixels, text on such a screen would be too tiny to read. So browsers measure pages in CSS pixels, a unit that stays about the same size to the eye on every device, and each CSS pixel is drawn with several real pixels.
- Screen size (CSS pixels) is the size websites work with. A phone might report 393 × 852.
- Real pixels is that size multiplied by the pixel ratio. The same phone, with a ratio of 3, has 1179 × 2556 real pixels. This is the "resolution" on the box.
- Pixel ratio is how many real pixels sit along one side of a CSS pixel. 1 on ordinary monitors, 2 on most "Retina" laptops, 2 to 3.5 on phones. Zooming the page in a desktop browser changes this figure.
The other lines
| Line | Meaning |
|---|---|
| Page area now (viewport) | The part of the window that shows the page, without toolbars and scroll bars. It changes when you resize the window, turn the phone or open the keyboard |
| Space the system leaves for windows | The screen less the taskbar or dock |
| Colour depth | Bits used for each pixel's colour. 24 bits gives about 16.7 million colours; 30 means a wide-colour display |
| Direction | Portrait (taller than wide) or landscape |
| Touch points | How many fingers the screen can follow at once. 0 means no touch screen |
| Colour scheme asked for | Whether your system is set to dark or light mode. Sites like this one follow it |
| Less motion asked for | Whether you have asked the system to reduce animation |
Common screen sizes
Sizes vary, but these appear very often. Desktop monitors and laptops: 1366 × 768, 1536 × 864, 1920 × 1080 (Full HD), 2560 × 1440 and 3840 × 2160 (4K). Phones report much smaller CSS sizes, typically 360 to 430 wide and 740 to 930 tall, although their real pixel counts match or exceed a Full HD monitor.
That gap is why a site must be built to work at 360 pixels wide even when "everyone has a high-resolution phone".
What people use this page for
- Choosing a wallpaper of the right size: use the real pixels figure.
- Reporting a layout problem: tell the developer your viewport size and pixel ratio.
- Checking a new monitor or a TV used as a monitor: if the figure is lower than the screen's rated resolution, look at the display scaling setting in your system and at the cable or port in use.
- Testing a website you are building: resize the window and watch the viewport figure to find the widths where the layout changes.
- Recording or sharing the screen: the real pixel count is the size of the video you will get.
Display scaling on computers
Windows and macOS let you scale everything up for comfort, for example 125% or 150%. When you do, the browser reports a smaller CSS size and a higher pixel ratio. A 1920 × 1080 laptop at 125% reports 1536 × 864 with a ratio of 1.25. Nothing is wrong: multiply the two and you are back at 1920 × 1080.
Privacy note
These figures are part of what a site can use to build a browser fingerprint. On this page they are read and shown inside your browser only.
Why is my phone's screen size so small here?
You are seeing CSS pixels. Multiply by the pixel ratio for the real pixel count shown on the next line.
Why does the viewport change when I scroll on my phone?
Mobile browsers hide and show their address bar as you scroll, which changes the page area.
What is the difference between resolution and screen size in inches?
Inches measure the glass, corner to corner. Resolution counts pixels. A small phone and a large TV can have the same resolution.