Check your screen resolution, window size, pixel ratio, color depth, and device orientation instantly.
This tool instantly detects your screen resolution, window dimensions, device pixel ratio, color depth, and orientation. Perfect for developers, designers, and QA testers who need accurate display information.
Results update automatically when you resize the browser window or change orientation on mobile devices.
Screen resolution is the number of distinct pixels displayed on a monitor, expressed as width × height in pixels (e.g., 1920×1080). It defines the total visual workspace available on your display and directly impacts image clarity, text sharpness, and the amount of content that fits on screen at once.
Common resolutions include 1366×768 (budget laptops), 1920×1080 (Full HD, most common desktop), 2560×1440 (QHD, popular among developers), 3840×2160 (4K UHD), and 5120×2880 (5K Retina displays). Each step up provides significantly more screen real estate, which improves multitasking, code editing, and design work.
Screen resolution is different from display size (measured diagonally in inches). Two monitors can have the same physical size but different resolutions — a 27-inch 1080p display has larger pixels than a 27-inch 4K display, making the 4K screen noticeably sharper at the same viewing distance.
The tool reads display properties directly from the browser's window.screen and window.innerWidth/Height APIs. These values reflect your actual hardware screen size and the current browser viewport size respectively.
The pixel ratio (devicePixelRatio) shows how many physical pixels correspond to one CSS pixel — higher values mean sharper Retina or HiDPI displays.
Understanding common screen resolutions helps you design and test for your target audience. Here are the most prevalent resolutions in 2026:
For mobile devices, common resolutions include 1170×2532 (iPhone 14/15), 1080×2400 (mid-range Androids), and 1440×3200 (flagship Androids). Note that these are physical pixels — CSS pixels are typically 1/2 or 1/3 of these values depending on device pixel ratio.
When developing or testing web applications, keep these best practices in mind:
width: 1920px. Use relative units (%, vw, rem) and CSS Grid/Flexbox for responsive layouts.window.innerWidth not screen.width: screen.width gives the full monitor resolution (including inactive areas), while window.innerWidth gives the actual available viewport for your content.width: 1920px actually fills the entire screen. Always test with device pixel ratio in mind.Screen resolution refers to the total number of pixels displayed on your screen, expressed as width × height (e.g., 1920×1080). Higher resolution means more pixels and sharper images. It is determined by your monitor hardware and display settings.
Screen resolution is the full size of your physical display. Window size (viewport) is the actual area inside your browser window, which is smaller because of OS toolbars, browser chrome, and scroll bars. Both are shown separately in this tool.
Device pixel ratio is the ratio of physical screen pixels to CSS pixels. A DPR of 2 means one CSS pixel equals 2×2 physical pixels — common on Retina and HiDPI displays. This is why images need to be 2× size to look sharp on these screens.
Color depth (also called bit depth) indicates how many bits are used to represent the color of each pixel. 24-bit color supports 16.7 million colors (true color), while 32-bit adds an alpha channel for transparency. Most modern displays use 24-bit or 32-bit color depth.
The screen resolution itself does not change — that is fixed by your hardware. The window size updates in real time as you resize your browser. This tool auto-refreshes both values whenever the window is resized.
Yes. On mobile, the tool reads the actual screen dimensions and updates orientation when you rotate your device. Note that mobile browsers often report logical pixels (affected by DPR), so a 1080×1920 phone may show 360×640 CSS pixels with a DPR of 3.
This happens when your display scaling is set to something other than 100%. On Windows, 125% or 150% scaling makes screenshots capture logical pixels, not physical pixels. On macOS with Retina displays, screenshots capture at the full Retina resolution (2× or 3× DPR), so they appear larger than what you see on screen. To get the exact pixel dimensions, check the screenshot image properties — the dimensions shown there are the physical pixel count.