What Is My Screen Resolution?
Instantly detect your browser-reported screen dimensions, live browser viewport size, device pixel ratio (DPR), and color depth. Useful for responsive web design and system verification.
Screen Resolution vs. Browser Viewport
Two different measurements that are often confused — both critical for web developers and designers.
Reported Screen Size (Logical CSS Pixels)
This is the screen size in logical CSS pixels as reported by your browser (e.g., 1920 × 1080). It is determined by your hardware and OS display settings, scaled by your system's layout scaling configuration. This value remains constant when you resize your browser window, representing the overall display bounds allocated to the desktop interface.
Browser Viewport (CSS Pixels)
This is the visible area inside your browser window where web content is rendered. It is normally smaller than the reported screen dimensions because browser toolbars, tabs, scrollbars, and the OS taskbar/dock reduce the space available to web content. This is the bounding box web developers target using CSS media queries.
Why Both Matter
Designers utilize standard screen boundaries to establish static breakpoints, while developers configure responsive code structures around browser viewport dimensions. This tool displays both metrics dynamically, letting you observe viewport updates in real-time as you resize your browser window.
Your Display Information
Common Screen Resolutions & Aspect Ratios
How your screen compares to the most common display standards in use today.
| Resolution | Aspect Ratio | Common Name | Typical Devices | Total Pixels |
|---|---|---|---|---|
| 1920 × 1080 | 16:9 | Full HD (FHD) | Standard desktop monitors, laptops, and 1080p television panels. | ~2.07 million |
| 1366 × 768 | ~16:9 | HD / WXGA | Entry-level notebooks and legacy hardware configurations. | ~1.05 million |
| 2560 × 1440 | 16:9 | Quad HD (QHD) | High-resolution desktop displays, gaming monitors, and premium workstations. | ~3.69 million |
| 3840 × 2160 | 16:9 | 4K Ultra HD | High-density monitors, creative-professional displays, and modern UHD screens. | ~8.29 million |
| 2560 × 1600 | 16:10 | WQXGA | MacBook displays and taller productivity-focused laptop layouts. | ~4.10 million |
| 390 × 844 | ~19.5:9 | Mobile (Logical) | Logical screen size layout boundaries used by modern high-DPR mobile systems. | ~329K (CSS) |
| 360 × 800 | 20:9 | Mobile (Logical) | Standard Android screen scale logical width and height profiles. | ~288K (CSS) |
Understanding Each Display Metric
What each number means and why it matters for web development.
Screen Resolution
What it is: Total logical layout dimensions in CSS pixels (width × height) allocated to the display workspace.
Why it matters: Defines the boundary profile for window layouts and media scale thresholds.
Browser Viewport
What it is: The visible canvas containing rendered web content inside the browser window context.
Why it matters: This is the target container evaluated by responsive CSS engine media queries.
Device Pixel Ratio (DPR)
What it is: The translation ratio mapping physical display elements to logical software layouts.
Why it matters: Enables systems to request higher density responsive media variants (`srcset`) for sharp rendering.
Color Depth
What it is: Bits allocated to process and present color data structures within a single pixel boundary.
Why it matters: 24-bit color provides about 16.7 million possible RGB colors and is common on modern systems; lower color-depth modes can make visible banding more likely.
Available Screen
What it is: Total screen dimensions minus standard persistent OS interfaces like taskbars or system bars.
Why it matters: Outlines the maximum viewport potential when a user maximizes the display window.
Orientation
What it is: Whether the active window layout relies on a vertical or horizontal viewing ratio.
Why it matters: Provides structural parameters to help adapt layouts when a mobile screen is rotated.
Master Screen Resolution & Display Metrics
A complete guide explaining how screen resolution, browser viewport, device pixel ratio (DPR), color depth, and aspect ratios work — and why these values matter for responsive web design.
📘 Read Full Screen Resolution Guide →Honest by Design — What This Tool Does and Doesn't Do
This tool reads standard browser APIs to display your metrics. Here is exactly what it does and does not do:
- ✓ Reads
screen.width,window.innerWidth, anddevicePixelRatiovalues locally from your browser interface. - ✓ Tracks live viewport resize adjustments to update dimensions as you modify window scales.
- ✓ Uses User-Agent request data on the helper server to determine browser type and OS structures.
- ✓ Operates across mobile, desktop, and tablet browser boundaries natively.
- ✓ Does NOT measure your screen's physical size in inches/cm (which requires manual physical tracking).
- ✓ Does NOT collect canvas, WebGL, audio, font, or other advanced fingerprinting signals.
- ✓ Does NOT track your browsing activity or compile cross-visit display profiles.
- ✓ This tool reports the screen associated with the current browser window; it does not enumerate all connected displays.
This tool does
- Show reported screen dimensions (CSS pixels)
- Track live browser viewport on resize
- Detect Device Pixel Ratio (DPR)
- Show color depth and orientation
- Identify browser, OS, and device type
- Copy individual metrics or full report
This tool does not
- Measure physical display size in inches
- Enumerate all connected physical displays
- Compile persistent user tracking profiles
- Require software downloads or installations
- Deploy canvas or audio-fingerprint techniques
- Require an account or API key
How to Use This Checker
Automatic detection with live updates.
Load the page
Screen metrics are detected automatically via JavaScript on page load.
View results
Your resolution, viewport, DPR, color depth, and device info appear instantly.
Resize to test
Resize your browser window — the viewport dimensions update in real-time.
Copy data
Hover over any metric to copy it, or click "Copy Full Report" for all data.
Why Your Numbers Might Look Unexpected
Understanding surprising display metrics and what causes them.
Viewport Smaller Than Screen
Your viewport (e.g., 1420 × 780) is much smaller than your screen resolution (1920 × 1080).
Reality: This is completely normal. The viewport excludes browser UI (tabs, address bar, bookmarks bar), scrollbars, and your OS taskbar/dock. The viewport is the actual "canvas" for web content.
DPR is 2 but Screen is reported as 1080p
Your screen resolution says 1920×1080 but DPR says 2. Shouldn't it be 3840×2160?
Reality: JavaScript's screen.width reports logical CSS pixels rather than absolute device physical dimensions. Multiplying the reported CSS dimensions by the device pixel ratio (DPR) yields an estimated physical-pixel equivalent.
Viewport Changes Unexpectedly
Your viewport size changes even though you didn't resize the window.
Fix: Check your browser zoom level (Ctrl/Cmd + 0 to reset to 100%). Zooming in/out changes the logical CSS pixel size, which changes the viewport dimensions reported by JavaScript.
Multi-Monitor Display
You have multiple monitors but only one resolution value is presented.
Reality: Browser APIs report metadata tied to the window boundary coordinate space. To report coordinates from an alternate screen, drag the active browser window onto that screen and refresh.
Mobile Resolution Looks Tiny
Your phone shows 390×844 but the box says it has a 1170×2532 display.
Reality: Mobile devices evaluate page configurations using scaled logical CSS viewport profiles to keep text legible. Multiplying logical width values by active system DPR outputs estimated physical-pixel equivalent bounds.
Available Screen ≠ Total Screen
Your "Available Screen" is smaller than your "Screen Resolution".
Reality: Available screen metrics represent the portion of the reported screen area available to applications after system-reserved tray headers or task docks are subtracted.
Screen Resolution FAQs
Answers based on how browser APIs and display hardware actually work.
What's the difference between Screen Resolution and Viewport?
Screen dimensions indicate the total scaled canvas size made available to applications inside the operating environment. The viewport maps specifically to the visible, scrollable content area nested within the active window layout boundaries.
What is Device Pixel Ratio (DPR)?
DPR represents the mapping factor translation standard of virtual layout grids to screen hardware panels. High-density screens employ elevated scaling structures to render user assets clearly without making them appear micro-scaled.
Why does my phone show a small resolution like 390×844?
Mobile platforms construct virtual logical points to prevent site assets from collapsing into unreadably small resolutions. System scaling maps layouts properly based on current density standards.
Does browser zoom affect these numbers?
Yes. Scale adjustments dynamically modify relative CSS point sizes, shifting browser calculations of viewport boundaries. Reset your zoom configurations to 100% (Ctrl/Cmd + 0) when inspecting viewport profiles.
Can this tool measure my screen size in inches?
No. Client-side browser application layers operate within isolated digital coordinate maps and are unaware of physical display casing sizes. Calculating physical size requires combining digital results with manual hardware specs.
Why do I need to know my color depth?
Color depth structures clarify maximum color space representations. Modern 24-bit environments map color values smoothly, while lower performance formats can exhibit visual degradation on complex gradient assets.
Is this data private and secure?
Screen and viewport metrics are calculated directly in your browser and are not transmitted to our server. The server separately receives normal HTTP request metadata (like your IP address and User-Agent) to provide the browser, OS, and connection parameters shown in the report. We do not use these metrics for tracking or persistent profiling.
Why does my viewport height change when I scroll on mobile?
Dynamic browser frames scale address bars or navigation panels in response to page scrolling activities. Viewports adapt on demand to utilize the remaining available screen area during active browser interaction.