Screen Resolution Checker & Viewport Tester 💻
Instantly check your screen resolution, browser viewport, pixel ratio, device type, orientation, color depth, and active CSS breakpoints — updates live as you resize.
Free Screen Resolution Checker — Viewport, Breakpoints & Device Info
Our free screen resolution checker is an advanced online screen resolution tester that goes far beyond simply displaying your screen dimensions. It shows your browser viewport size (the actual CSS pixels available for web content), your physical screen resolution (hardware pixels), device pixel ratio, device type, screen orientation, color depth, touch support, available screen area, and — uniquely — your active CSS media query breakpoints for both Bootstrap 5 and Tailwind CSS, updating live as you resize your window. Whether you are a developer debugging a responsive layout, a designer checking a client's display, or a QA tester running a website screen resolution test, this tool gives you everything in one place.
Screen Resolution vs Browser Viewport — What Is the Difference?
Screen resolution is the total number of physical pixels on your monitor hardware — for example, a Full HD monitor has a screen resolution of 1920×1080. Browser viewport is the visible area inside your browser window where web content renders, measured in CSS logical pixels. The viewport is always smaller than the screen resolution because it excludes your operating system taskbar, browser toolbar and address bar, bookmarks bar, and window borders. For responsive web design, the viewport width is what matters — it determines which CSS media query breakpoints are active and which layout your visitors see. This online screen resolution test shows both values so you can see the exact difference on your current setup.
Device Pixel Ratio — Retina & High-DPI Displays
Device pixel ratio (DPR) is the ratio between your display's physical pixels and its CSS logical pixels. A standard 1080p monitor has a DPR of 1. Apple Retina displays, most modern smartphones, and high-DPI monitors typically have a DPR of 2 or 3 — meaning each CSS pixel is drawn using 4 or 9 physical pixels, making text and images appear significantly sharper. A DPR of 2 is why images on Retina screens need to be provided at 2× resolution (e.g. 400px image for a 200px img element) to avoid appearing blurry. This display resolution checker shows your exact DPR and labels it (Standard, Retina, Super Retina) so you know exactly what display category your device falls into.
CSS Breakpoint Checker — Bootstrap 5 & Tailwind CSS
The breakpoint checker is what makes this tool unique among free screen resolution testers. As you resize your browser window, the tool highlights which Bootstrap 5 and Tailwind CSS breakpoints are currently active — so you can immediately confirm which responsive layout tier your design is rendering at. Bootstrap 5 breakpoints are: xs (below 576px), sm (576px+), md (768px+), lg (992px+), xl (1200px+), xxl (1400px+). Tailwind CSS breakpoints are: base (below 640px), sm (640px+), md (768px+), lg (1024px+), xl (1280px+), 2xl (1536px+). This makes the tool directly useful for developers testing responsive layouts without opening browser DevTools.
Screen Size Categories — HD, FHD, QHD, 4K
- HD (1280×720) — 720p resolution, common on budget laptops and older monitors.
- Full HD / FHD (1920×1080) — 1080p, the most common desktop and laptop resolution globally as of 2026.
- QHD / 2K (2560×1440) — Quad HD, common on premium monitors and high-end phones like Samsung Galaxy.
- 4K / UHD (3840×2160) — Ultra HD, common on large monitors, TVs used as monitors, and some MacBook Pros.
- 5K and above — Found on Apple Studio Display and select professional monitors.
What Makes This Tool Different From Other Screen Resolution Checkers?
Most free screen resolution tools show just two numbers — width and height. This tool shows 10+ data points including viewport vs screen, device type, orientation, color depth, touch support, available screen area, DPR with label, screen category (HD/FHD/QHD/4K), and live Bootstrap + Tailwind CSS breakpoints — all updating in real time as you resize. The Copy All Results button exports everything as a formatted text block for bug reports, design handoffs, and QA notes. No other free tool combines all of these in one place without requiring a login or browser extension.
Frequently Asked Questions
What is screen resolution and how do I check it?
Screen resolution is the number of physical pixels on your display hardware (e.g. 1920×1080 for Full HD). This tool detects and displays it automatically. It also shows your browser viewport — the CSS area available for web content — which is what matters for responsive design.
What is the difference between screen resolution and browser viewport?
Screen resolution is your monitor's total physical pixels. Browser viewport is the visible CSS area inside your browser window — always smaller than screen resolution because it excludes taskbars, toolbars, and browser chrome. Viewport width is what controls CSS media query breakpoints.
What is device pixel ratio (DPR)?
DPR is the ratio of physical pixels to CSS pixels. A DPR of 1 is a standard display. DPR 2 (Retina) means 4 physical pixels per CSS pixel — making images and text sharper. Most modern phones and MacBooks have DPR of 2 or 3.
What CSS breakpoints does this tool detect?
Bootstrap 5 (xs/sm/md/lg/xl/xxl) and Tailwind CSS (base/sm/md/lg/xl/2xl) breakpoints — all active breakpoints are highlighted in real time as you resize your window.
How do I test my website's screen resolution compatibility?
Open this tool and resize your browser to different widths to see viewport dimensions and active breakpoints update live. For specific device simulations, combine this with browser DevTools (F12 → device mode) for full responsive testing.
What is color depth and what does 24-bit mean?
Color depth is the number of bits used per pixel. 24-bit (true color) = 16.7 million colors (8 bits each for red, green, blue). 32-bit adds an alpha channel. Nearly all modern displays use 24-bit or 32-bit color depth.
About This Tool — What Makes It Different
This Screen Resolution Checker was built by the FreeImageTools team — front-end developers and UI/UX designers who test responsive layouts across devices daily. The original tool showed just 3 values (viewport width/height, screen width/height, pixel ratio). We expanded it to 10+ real-time data points: viewport with screen category label, screen resolution with HD/FHD/QHD/4K classification, DPR with Retina label, device type detection (mobile/tablet/desktop), screen orientation, color depth with bit description, touch support, available screen area excluding taskbar, live Bootstrap 5 breakpoints, and live Tailwind CSS breakpoints — plus a Copy All Results button for exporting the full data. All data comes from browser JavaScript APIs — no server calls, no data stored. Reviewed and tested across desktop, tablet, and mobile devices in June 2026.