Browser & device
What is my screen resolution?
Your screen size, browser window size and pixel ratio – updated live as you resize.
All the details
Screen resolution vs. browser window
Your screen resolution is the size of your whole display. Your browser window (or viewport) is the part a web page can use – smaller, because of toolbars, tabs and the taskbar. Web designers care most about the viewport.
What is the device pixel ratio?
Modern screens pack several physical pixels into each "CSS pixel" so text looks sharp. A pixel ratio of 2 means each CSS pixel is 2 × 2 physical pixels. Multiply the screen resolution by the pixel ratio to get your display's native resolution. Zooming the page in or out also changes the ratio.
Why does my resolution look smaller than advertised?
Operating systems scale the display (for example 150% on a laptop), so a 2880 × 1800 screen reports 1920 × 1200 to websites. The physical resolution is shown above as "native resolution".
Common screen resolutions
| Name | Physical pixels | Typical device |
|---|---|---|
| HD / 720p | 1280 × 720 | Budget laptops, older TVs |
| Full HD / 1080p | 1920 × 1080 | Most office monitors and laptops |
| QHD / 1440p | 2560 × 1440 | Gaming and 27-inch monitors |
| 4K UHD | 3840 × 2160 | Large monitors and TVs |
| Retina laptop | 2560 × 1600 or higher | MacBook Air / Pro |
Phones have very high physical resolutions but report much smaller CSS pixel sizes – often around 360 to 430 pixels wide – because the device pixel ratio is 2 or 3.
Getting an accurate reading
Reset the browser zoom first (Ctrl + 0, or Cmd + 0 on a Mac), because zoom changes the reported pixel ratio. On a laptop with Windows display scaling at 125%, for example, a 1920 × 1080 panel is reported to websites as 1536 × 864. Moving the browser to a second monitor updates the values for that screen.
Why web designers care
- Responsive layouts use the viewport width (the inner window size), not the screen size, to decide how a page is arranged.
- Sharp images on high-DPI screens need files at 2× or 3× the displayed size.
- Testing: developer tools let you simulate other viewports, and this page updates live as you resize so you can check breakpoints.
Screen size and pixel ratio also contribute to your browser fingerprint.
Screen resolution – frequently asked questions
How do I change my screen resolution?
On Windows, go to Settings › System › Display and choose “Display resolution” and “Scale”. On a Mac, open System Settings › Displays. Using the panel’s native resolution gives the sharpest picture.
Why does the window size differ from the screen size?
The browser window excludes the taskbar or Dock, the browser’s own toolbars and any space you have not maximised.
What resolution should I use for screenshots or presentations?
1920 × 1080 is the safest choice; it fits most projectors and video platforms without scaling.