🖥️ Screen Resolution Checker
By ToolNimba Web Dev Team · Updated 2026-06-19
Live readings from your own device. Drag, resize, or rotate to watch the numbers change.
Effective resolution (CSS pixels x device pixel ratio): -
This screen resolution checker reads your device's display details straight from the browser and shows them live. You get your full screen resolution, the browser viewport (the part of the page you can actually see), the available screen area, the device pixel ratio, the color depth, and the current orientation. Resize the window or rotate your device and every value updates on the spot, so you always see the real numbers for the screen you are using right now.
What is the Screen Resolution Checker?
Your screen resolution is the total number of pixels your display can show, written as width by height, for example 1920 x 1080. The browser reports this through screen.width and screen.height. It describes the whole physical screen, not the browser window, and it does not change when you resize or scroll. People often confuse this fixed screen size with the much smaller area a web page is actually drawn into.
The browser viewport is that drawable area: the width and height of the content region inside the window, reported by innerWidth and innerHeight. It is almost always smaller than the screen because it excludes the browser toolbar, tabs, scrollbars, and any window chrome, and it shrinks further if the window is not maximized. For responsive web design the viewport is the number that matters, since CSS media queries and layout breakpoints respond to it rather than to the physical screen.
Two more values round out the picture. The device pixel ratio (DPR) is how many physical pixels map to one CSS pixel: a standard display is 1, while Retina and other HiDPI screens are 2 or 3, which is why a 1440 CSS-pixel-wide phone can actually pack 2880 hardware pixels across. Color depth is the number of bits used to store each pixel's color, commonly 24-bit (about 16.7 million colors). Orientation simply tells you whether the screen is currently wider than it is tall (landscape) or taller than wide (portrait).
When to use it
- Quickly answering "what is my screen resolution?" without digging through system settings.
- Checking the real browser viewport size while building or debugging a responsive layout.
- Confirming the device pixel ratio so you can serve crisp images on Retina and HiDPI screens.
- Reporting your exact display details to a support team or in a bug report.
- Comparing the viewport at different window sizes to find where a CSS breakpoint should sit.
How to use the Screen Resolution Checker
- Open the tool, the readings for your current device appear immediately.
- Read your screen resolution, browser viewport, available screen, device pixel ratio, color depth, and orientation.
- Resize the browser window or rotate your device to watch the viewport and orientation update live.
- Press "Copy all" to copy every value to your clipboard for a bug report or note.
Formula & method
Worked examples
A laptop set to a 1920 x 1080 screen with a maximized browser window.
- screen.width x screen.height reports the full screen: 1920 x 1080 px
- The browser toolbar and tabs take roughly 120 px of height, so innerHeight is about 960
- A vertical scrollbar removes about 15 px of width, so innerWidth is about 1905
- Browser viewport is therefore about 1905 x 960 px
- Device pixel ratio is 1, so effective resolution equals the screen: 1920 x 1080 px
Result: Screen 1920 x 1080, viewport about 1905 x 960, DPR 1, landscape
A modern phone with a 390 x 844 CSS viewport and a device pixel ratio of 3.
- innerWidth x innerHeight reports the CSS viewport: 390 x 844 px
- Device pixel ratio is 3 (a HiDPI display)
- Physical width = 390 x 3 = 1170 px
- Physical height = 844 x 3 = 2532 px
- Height is greater than width, so the orientation is portrait
Result: CSS viewport 390 x 844, physical 1170 x 2532, DPR 3, portrait
What each reported value means
| Property | Browser source | What it describes |
|---|---|---|
| Screen resolution | screen.width x screen.height | Total physical pixels of the whole display |
| Browser viewport | innerWidth x innerHeight | Visible page area, minus toolbars and scrollbars |
| Available screen | availWidth x availHeight | Screen minus OS taskbars and docks |
| Device pixel ratio | devicePixelRatio | Physical pixels per CSS pixel (1 = standard, 2 to 3 = HiDPI) |
| Color depth | screen.colorDepth | Bits per pixel, commonly 24-bit |
Common screen resolutions and their names
| Name | Resolution | Aspect ratio |
|---|---|---|
| HD (720p) | 1280 x 720 | 16:9 |
| Full HD (1080p) | 1920 x 1080 | 16:9 |
| WUXGA | 1920 x 1200 | 16:10 |
| QHD (1440p) | 2560 x 1440 | 16:9 |
| 4K UHD | 3840 x 2160 | 16:9 |
Common mistakes to avoid
- Treating screen resolution and viewport as the same thing. The screen resolution is the whole physical display and never changes when you resize the window. The viewport is the smaller area a page is drawn into, after toolbars and scrollbars are removed. Responsive layouts respond to the viewport, not the screen.
- Ignoring the device pixel ratio. On a HiDPI screen the CSS viewport is far smaller than the physical pixel count. A 1440-wide CSS viewport at a DPR of 2 is really 2880 hardware pixels wide. Forgetting this leads to blurry images, because you served an image sized for CSS pixels instead of physical pixels.
- Assuming everyone uses a 1920 x 1080 screen. Screen sizes vary enormously across phones, tablets, laptops, and high-resolution monitors. Designing only for one common resolution breaks the layout for the many visitors on different displays.
- Reading the viewport once and never updating it. Window size and orientation can change at any moment. A one-time reading goes stale the instant the user resizes or rotates, so layout logic should listen for the resize and orientationchange events.
Glossary
- Screen resolution
- The total pixel dimensions of the physical display, written width x height, such as 1920 x 1080.
- Viewport
- The visible area of a web page inside the browser window, reported by innerWidth and innerHeight.
- Device pixel ratio (DPR)
- The number of physical screen pixels that make up one CSS pixel. Standard displays are 1, HiDPI and Retina displays are 2 or 3.
- Color depth
- The number of bits used to store the color of a single pixel. 24-bit gives about 16.7 million colors.
- Orientation
- Whether the screen is currently wider than tall (landscape) or taller than wide (portrait).
- Available screen
- The screen area left for windows after the operating system reserves space for taskbars and docks.
Frequently asked questions
What is my screen resolution?
Your screen resolution is shown at the top of this tool, read directly from your browser as screen.width x screen.height. It is the full pixel size of your physical display, for example 1920 x 1080, and it does not change when you resize the browser window.
Why is the browser viewport smaller than my screen resolution?
The viewport (innerWidth x innerHeight) is only the area a web page is drawn into. It excludes the browser toolbar, tabs, and scrollbars, and it shrinks further whenever the window is not maximized, so it is almost always smaller than the full screen.
What is device pixel ratio and why does it matter?
Device pixel ratio is how many physical pixels map to one CSS pixel. A standard screen is 1, while Retina and other HiDPI screens are 2 or 3. It matters because on those screens you need images sized for the physical pixel count, or they look blurry.
Does this tool send my screen information anywhere?
No. Everything runs entirely in your browser using built-in JavaScript properties like screen.width and window.innerWidth. No measurements are uploaded, stored, or shared, the readings never leave your device.
Why do the numbers change when I resize the window?
The browser viewport tracks the size of the window content area, so it updates as you drag or maximize the window. The tool listens for resize and orientation changes and refreshes the viewport, orientation, and effective resolution live.
What does 24-bit color depth mean?
Color depth is the number of bits used to describe each pixel's color. 24-bit, the most common value, allocates 8 bits each to red, green, and blue, giving about 16.7 million possible colors, often called true color.