Enter a Website URL i.e. https://www.example.com

Select one of the Devices

Generate Screenshot

What Is My Screen Resolution? Display Size, Viewport, DPR, Color Depth

Our free Screen Resolution Detector reports exactly what your current display is doing: screen width × height in pixels, browser viewport width × height, device pixel ratio (1× / 2× / 3× retina), color depth, orientation, and refresh rate where the browser exposes it. Everything runs locally — JavaScript reads `window.screen` and `window.innerWidth` properties; nothing is sent to a server.

Knowing your screen resolution comes up in surprisingly many situations. Designers calibrating mockups need to confirm "is my preview actually 1920×1080?" Developers writing responsive CSS need to know which media-query breakpoint their current viewport hits. Anyone setting up an external monitor verifies the OS recognized the native resolution. Gamers tuning settings ask "is this 1440p or 4K?" Streamers configuring OBS need precise dimensions. Customer support asking "what device are you on?" gets a precise answer.

What the detector reports

Screen resolution. The full display's pixel dimensions (e.g., 1920×1080, 2560×1440, 3840×2160). This is the OS-reported size of the entire screen, not just the browser window.

Available screen area. Screen minus taskbar/dock. The "usable" area where maximized windows can sit (e.g., 1920×1040 on Windows because the 40px taskbar takes the bottom).

Browser viewport. The actual pixel dimensions of the browser window's content area (no toolbar, no scrollbar). What CSS media queries actually measure. Smaller than screen resolution because of browser chrome, window decorations, and possibly an open DevTools panel.

Device pixel ratio (DPR). The ratio of CSS pixels to device pixels. 1.0 on standard displays; 2.0 on retina/HiDPI; 3.0 on some mobile devices. A "1px border" CSS rule actually paints 2 physical pixels on a retina display.

Color depth. Bits per pixel (16, 24, 32). 24-bit (8 bits per RGB channel) is the modern default. 30/36-bit HDR displays are emerging.

Orientation. Portrait / landscape, plus the angle in degrees (0°, 90°, 180°, 270°). Mostly relevant for mobile / tablet.

Refresh rate. 60Hz default; 120Hz/144Hz on gaming monitors; 90Hz/120Hz on some phones. Browser doesn't always expose this; some browsers do via the experimental `screen.refreshRate`.

Browser zoom level. 100% normally; affects what CSS sees as "viewport width." Detected via screen-vs-document ratio calculations.

Screen resolution vs viewport — the most-confused distinction

Screen resolution is what the OS sees. 1920×1080 on a Full HD monitor regardless of browser.

Browser viewport is what CSS sees. Always smaller than screen resolution because:

• Browser chrome (URL bar, tabs, bookmarks bar) takes top space
• Window manager decorations take borders
• Scrollbar (if visible) takes right edge
• If DevTools is open, it takes significant space
• If the browser isn't maximized, viewport is whatever the window dimensions are

CSS media queries (`@media (max-width: 768px)`) match against viewport, not screen resolution. A 4K monitor with a half-maximized browser window has viewport 960px wide — your "mobile" CSS kicks in even though you're on desktop.

Common gotcha. Developer designs to a 1920px viewport assuming screen resolution = viewport. On a 4K monitor with maximized browser, viewport is ~3800px wide. The "1920px max-width" container looks centered on a sea of whitespace. Always design for viewport, not screen resolution.

Device pixel ratio — why it matters

Retina / HiDPI displays pack more device pixels into the same CSS pixel area. A 5K iMac has 5120×2880 device pixels but reports a 2560×1440 CSS resolution at DPR 2.0. CSS dimensions stay the same; physical pixels double.

Why it matters for design:

Images need to be 2× their CSS size to look crisp on retina. An `` displayed at 200×200 CSS pixels needs a 400×400 source image on retina. The browser-native `srcset` attribute handles this: ``.

SVG and icon fonts scale automatically. They're vector — render perfectly at any DPR. Prefer them over raster images for UI icons.

Borders and shadows render at sub-pixel precision on retina. A "1px border" actually renders as a sharp 1px line on retina (using 2 device pixels for the same width). Looks crisper than a 1px line on 1x displays.

Background-image needs `background-size`. Without explicit size, a background image renders at its natural pixel dimensions, which look tiny on retina. Use `background-size: contain` or specific dimensions.

Common screen resolutions and their context

1366×768 — Common budget laptop screen. Most-shipped laptop resolution for years. Design for this floor.

1920×1080 (Full HD) — Default desktop and most laptops 2015+. Standard for movies, games.

2560×1440 (QHD/2K) — Premium laptops, mid-range monitors. Common for gaming.

3840×2160 (4K) — Premium monitors, TVs. iMac M1+ resolution. Becoming standard.

5120×2880 (5K) — Apple Studio Display, iMac Retina. Niche.

7680×4320 (8K) — High-end TVs. Browser support exists; almost no content yet.

Mobile portrait (390×844 iPhone 14, 412×915 Pixel 7) — Reported as that low resolution despite the device having 1170×2532 actual pixels (DPR 3.0).

Tablet (768×1024 iPad portrait, 1024×768 iPad landscape) — Reported at the CSS resolution; actual device pixels 2× higher.

Real-world use cases

Designer mockup calibration. "My Photoshop canvas is 1920×1080 — is that what users will see?" Run the detector, confirm browser viewport at 1920px on a maximized browser. (Spoiler: probably not, because of browser chrome.)

CSS media-query debugging. "Why is my mobile layout showing on desktop?" Check viewport width vs media query breakpoints. Half-maximized desktop browser often hits mobile breakpoint.

Responsive image generation. Knowing user DPR helps you tune your `srcset` settings — most users on 2x, some on 3x; design accordingly.

External monitor verification. Plug in a new monitor. The OS may report wrong resolution if drivers are missing. The detector confirms what the browser sees.

Multi-monitor setup. Browser shows you the current monitor's resolution. Move the window to a different monitor, refresh — different reading.

Game streaming setup. OBS or similar streaming software wants exact source dimensions. Detector confirms.

Customer support diagnosis. "I can't see X on the screen." Detector reveals their viewport — often half what they think (low-resolution screen, browser zoom, or wide DevTools panel).

Print preview matching. 1in = 96 CSS pixels at default DPI. Print preview at 100% should match screen pixels approximately.

Web app responsive testing. Resize browser, watch viewport changes in real-time, verify your responsive breakpoints kick in correctly.

Mobile device class detection. User reports issue on "my phone." Detector reveals exact viewport — useful to distinguish iPhone SE from iPhone Pro Max.

Browser zoom troubleshooting. Some users have browser zoom at 110% by default and don't know. Their viewport is 91% of yours; layouts may look different.

Video conferencing setup. Confirm camera/screen dimensions match the intended sharing.

Game testing across resolutions. Verify the game renders correctly at the actual resolution before launching.

4K content creator's check. Streaming 4K video — confirm the output dimensions match the intended quality.

Edge cases and gotchas

Browser zoom changes viewport. 110% zoom = viewport effectively shrinks by ~9%. CSS still measures in CSS pixels (sees zoom as 9% smaller viewport).

DevTools open shrinks viewport. A 50% panel splits available space. Close DevTools when measuring true viewport.

Mobile orientation changes. Rotating device changes width/height. Detector refreshes on orientation change event.

Foldable phones. Folded vs unfolded reports different resolutions. The detector shows current state.

Multiple monitors with different DPR. Mac with built-in 5K + external 1080p monitor: each has different DPR. Detector shows current window's monitor.

OS scaling (Windows 10/11 "Scale and layout"). Setting display scale to 125%/150% changes the CSS resolution the browser reports. Native resolution stays the same; CSS shrinks.

iframe inside a page. If detector page is in an iframe, viewport reflects iframe size, not parent window.

Pointer events from touchpads vs mice. Doesn't affect resolution but affects interaction design. Detector can also show pointer types when available.

Reduced-motion / contrast preferences. Some OSes expose them via `prefers-reduced-motion` and `prefers-contrast` media queries. Useful for accessibility-aware design.

Color gamut. P3, sRGB, Rec.2020 — different color spaces. Modern browsers expose via `screen.colorGamut` (limited support).

Privacy

The detector reads `window.screen`, `window.innerWidth`, `window.innerHeight`, `window.devicePixelRatio`, and similar JavaScript properties. All client-side. Nothing is uploaded or logged. The page is a static HTML/JS bundle.

That said, screen resolution + browser is a common browser-fingerprinting signal. Reporting your screen dimensions to a third-party server (which we don't do, but other tools might) contributes to your trackable identity. Be mindful of which sites you reveal these to.

Frequently asked questions

What's the difference between screen resolution and viewport? Screen resolution = full display dimensions. Viewport = browser content area (smaller due to UI chrome and scrollbar).

What's a "good" screen resolution? Display-dependent. 1920×1080 is fine for productivity. 2560×1440 / 4K is preferred for design / detailed work.

Is my screen retina? Check DPR — if it's 2.0 or higher, yes (it's a HiDPI display, often called "retina" by Apple).

Why is my viewport smaller than my screen? Browser chrome + window decorations + scrollbar + DevTools. Maximize browser, close DevTools, fullscreen for max viewport.

What's color depth? Bits per pixel. 24-bit = 16.7M colors (standard). 30-bit = 1B colors (HDR). Both look similar to most eyes.

Why does Windows show 125% scaling? Windows "Scale and layout" enlarges UI for high-DPI displays. CSS still sees the native resolution. The detector shows actual screen res; OS scaling is invisible to the browser.

Can the detector tell me my refresh rate? Some browsers expose it; others don't. Where available, it's shown.

What's CSS pixels vs device pixels? CSS pixels are what you specify in stylesheets (`width: 1px`). Device pixels are physical pixels on screen. DPR = device pixels / CSS pixels.

Does Browser zoom affect viewport? Yes — at 200% zoom, viewport effectively shrinks by 50% in CSS pixels.

How is "screen resolution" useful for designers? Less than viewport. Design for the viewport range your users have (usually 360px mobile to 1920px desktop).

Why does my media query say "mobile" on desktop? Viewport is below the breakpoint. Either browser isn't maximized, or DevTools is open and large.

Is my display 4K, 2K, or HD? 4K = 3840×2160. 2K (QHD) = 2560×1440. HD = 1920×1080 (also called "Full HD" or "1080p").