Understanding Screen Resolution, Viewport, and DPI
Screen resolution is one of the most fundamental display properties. It describes the total number of pixels a monitor can render, expressed as width times height — for example, 1920 × 1080 (commonly called "Full HD" or "1080p"). The higher the resolution, the more detail a display can show. A 4K monitor at 3840 × 2160 packs four times as many pixels as a 1080p screen, which makes text crisper, images sharper, and UI elements finer. Knowing your screen resolution matters for choosing wallpapers, diagnosing layout issues, verifying that a new monitor is running at its native resolution, or simply satisfying your curiosity about the hardware you use every day.
Viewport Size vs. Screen Resolution
Screen resolution and viewport size are related but different measurements. Screen resolution refers to the total pixel dimensions of the physical display — the entire monitor. Viewport size, on the other hand, is the portion of the screen the browser actually uses to render web content. The viewport is always smaller than the full screen resolution because it excludes the operating system taskbar, the browser's address bar, tab strip, bookmarks toolbar, and any other chrome elements. When web developers build responsive layouts, they target the viewport rather than the screen resolution, because the viewport determines how much room their content actually has. This tool reports both values so you can see the exact difference.
Device Pixel Ratio and DPI
Modern displays — especially smartphones, tablets, and Retina MacBooks — pack more physical pixels into every inch of screen than older monitors. The device pixel ratio (DPR) describes this relationship. A DPR of 1 means one CSS pixel equals one hardware pixel (the traditional setup). A DPR of 2 (common on Apple Retina displays) means each CSS pixel is backed by a 2 × 2 grid of hardware pixels, producing much sharper text and images. DPR is critical information for front-end developers serving high-resolution images: an image displayed at 200 CSS pixels wide needs to be at least 400 physical pixels wide on a DPR-2 screen to look crisp.
DPI (dots per inch) measures pixel density. Browsers do not expose the true hardware DPI directly, so this tool estimates it by multiplying the standard CSS baseline of 96 DPI by the device pixel ratio. For a display with DPR 2, the estimated DPI is 192. While this is not an exact hardware measurement, it provides a useful approximation for comparing display densities and diagnosing rendering issues.
Responsive Design and Tailwind Breakpoints
Responsive web design uses CSS media queries to adapt a layout to different screen widths. Tailwind CSS defines six standard breakpoints that are widely adopted across the front-end community: sm (640 px), md (768 px), lg (1024 px), xl (1280 px), and 2xl (1536 px). This tool tests each breakpoint against your current viewport width using live window.matchMedia queries and highlights the ones that match. As you resize the browser window, the indicators update in real time (debounced for performance), so you can see exactly which breakpoints fire at any window width. This is invaluable when debugging responsive layouts or choosing breakpoint values for a custom design system.
Color Depth and Aspect Ratio
Color depth describes how many bits are used to represent the color of a single pixel. Most modern displays report a color depth of 24 bits, which supports 16.7 million colors (8 bits per channel for red, green, and blue). Some high-end displays and HDR screens report 30-bit or higher color depth. Aspect ratio is the proportional relationship between width and height. Common ratios include 16:9 (standard widescreen), 16:10 (many laptops), 21:9 (ultrawide monitors), and 4:3 (older monitors). This tool calculates the aspect ratio by reducing the screen width and height using the greatest common divisor, giving you the simplest integer ratio.
How to Use This Tool
Simply open this page and all display information is detected automatically — no clicks or permissions required. The data refreshes live as you resize your browser window. Use the Copy All Info button to copy every metric to your clipboard in a clean text format, which is handy for pasting into bug reports, design documents, or support tickets. Everything runs entirely in your browser; no data is sent to any server.
Frequently Asked Questions
What is screen resolution?
Screen resolution is the number of pixels displayed horizontally and vertically on a screen, expressed as width × height (e.g. 1920 × 1080). Higher resolutions mean more detail and sharper visuals.
What is the difference between screen resolution and viewport size?
Screen resolution is the total pixel count of your physical display. Viewport size is the visible rendering area inside your browser window, which excludes the browser UI and OS taskbar.
What is device pixel ratio (DPR)?
DPR is the ratio between hardware (physical) pixels and CSS (logical) pixels. A DPR of 2 means each CSS pixel maps to a 2 × 2 block of hardware pixels, common on Retina and HiDPI displays.
How is DPI estimated in a browser?
Browsers don't expose the actual hardware DPI. This tool estimates it by multiplying 96 (the CSS standard DPI) by the device pixel ratio. For DPR 2, the estimated DPI is 192.
Does this tool work on mobile devices?
Yes. All values are detected using standard browser APIs that work on smartphones, tablets, and desktop browsers. On mobile devices, the screen resolution reported is the logical resolution as seen by the browser, not always the full hardware resolution.
This tool is free, private, and requires no installation or sign-up. Bookmark it for quick access whenever you need to check your display properties.