Screen Resolution

Screen Resolution shows everything your browser knows about the screen it is on, and keeps it current as you resize the window, rotate a phone or drag the window to another monitor. The large number is the screen’s resolution in device pixels — the real dots on the panel at your current scaling — with its common name (Full HD, QHD, 4K) and aspect ratio. Below that are the screen in CSS pixels (the units web pages are laid out in), the area left after the taskbar or dock, the device pixel ratio that links the two, and the orientation. The second list is about the browser window: the viewport that CSS media queries and responsive designs see, any pinch zoom, the refresh rate measured from the browser’s own frames, the colour depth, the colour range (gamut) the screen covers and whether it can show HDR.

1. Open the page: the readings appear at once and update by themselves.
2. Resize the window to watch the viewport change, or turn your phone or tablet to see orientation and sizes swap.
3. Leave the page visible for two seconds for the refresh rate to settle; on a laptop, try it plugged in and on battery.
4. Drag the window to another monitor to read that one; the values change within a second.

• Device pixels are worked out as CSS pixels times the pixel ratio. When the system is scaled (125% or 150% in Windows, “More space” on a Mac) or the browser is zoomed, the browser rounds, so the result can be a pixel or two off the panel’s native resolution — and it shows the resolution the system is currently using, which on a Mac may be scaled rather than native.
• The refresh rate is measured from animation frames. Browsers slow frames when a laptop saves battery, in a background tab, or when the window spans two monitors, so a 120 Hz or 144 Hz screen can read 60 Hz until power saving is off. Variable-refresh (FreeSync, G-Sync, ProMotion) screens may read lower while idle.
• Physical size and DPI (dots per inch) cannot be read by a web page: the browser does not know how large the screen is. For DPI, divide the device pixels across by the screen’s width in inches from its specification.
• Colour depth is what the browser reports, and many browsers report 24-bit even on 10-bit panels. HDR and gamut need both the screen and the browser to support them, and HDR may need switching on in the system’s display settings.
• Everything is read by this page from your browser and shown only to you. Nothing is sent or stored, and the page asks for no permission.

Device pixels are the dots on the screen. CSS pixels are the units web pages use, kept roughly the same physical size on every screen. A phone with a 1170-pixel-wide screen and a pixel ratio of 3 lays pages out 390 CSS pixels wide, then draws each CSS pixel with nine device pixels for sharper text.

Either the system is scaled, or the browser is zoomed. Press Ctrl+0 (⌘+0) to reset browser zoom. In Windows, the display settings show the scale (for example 150%); the device-pixel reading then shows the resolution the panel is actually running at.

Keep this page open and visible for a few seconds; it counts the frames the browser draws. If a high-refresh monitor reads 60 Hz, check the refresh rate in the system’s display settings, the cable (some HDMI cables are limited to 60 Hz) and that the browser window is entirely on that monitor.

Common phone viewports are 360 to 430 CSS pixels wide, tablets 768 to 1024 and laptops 1280 to 1536. Design for widths rather than particular devices, and test down to 320.