Screen Resolution Checker

About Screen Resolution Checker

Screen Resolution vs Viewport Size

Screen resolution is the total pixel grid of the physical display; viewport size is the area inside the browser window where HTML renders. The viewport is always smaller because it excludes browser chrome (tabs, address bar, bookmarks bar) and operating system elements (taskbar, dock, menu bar).

Measurement	What It Represents	Browser API	Typical 1080p Value
Screen resolution	Total display pixels available	screen.width / screen.height	1920 x 1080
Viewport size	Content area inside the browser	window.innerWidth / innerHeight	1920 x 937 (Chrome maximised)
Available screen	Screen minus OS taskbar/dock	screen.availWidth / availHeight	1920 x 1032
Document size	Full scrollable page area	document.documentElement.scrollWidth	Varies with content

CSS media queries target the viewport, not the screen. A rule like @media (max-width: 768px) fires when the browser window is 768 CSS pixels wide, regardless of whether the display is 4K or 1080p. That distinction matters because a 4K monitor running a window at 700px wide still triggers the mobile breakpoint.

Worked example: A 27-inch 4K monitor has a screen resolution of 3840 x 2160 physical pixels. At 200% OS scaling (common on Windows and macOS), the browser reports screen.width = 1920 and a viewport of around 1920 x 1032 when maximised. Media queries see the same 1920px width a 1080p display would, which is why responsive design is based on CSS pixels rather than hardware pixels.

Device Pixel Ratio Explained

Device pixel ratio (DPR) is the number of physical pixels packed into each CSS pixel, and it determines how sharp text and images look on high-density displays. Per the W3C CSS Values and Units specification, window.devicePixelRatio returns this value as a decimal. A DPR of 2 means each CSS pixel is rendered using a 2x2 grid of hardware pixels (4 total); a DPR of 3 means a 3x3 grid (9 total).

Display Type	DPR	Physical Pixels per CSS Pixel	Common Devices
Standard	1	1 (1x1)	Most external monitors, older laptops
Retina / HiDPI	2	4 (2x2)	MacBook Pro, iPhone SE, iPad, Pixel 9
Super Retina / 3x	3	9 (3x3)	iPhone 15 Pro, Samsung Galaxy S24 Ultra
Fractional	1.25, 1.5, 1.75	Varies	Windows laptops at 125%/150%/175% scaling
Browser zoom	Any decimal	Changes dynamically	Ctrl/Cmd + and - shifts DPR up or down

DPR directly affects image delivery. On a 2x display, a 100x100 CSS pixel image needs 200x200 physical pixels of source data to look sharp; anything smaller appears blurry. The MDN Web Docs recommend serving DPR-aware images using the HTML srcset attribute or the CSS image-set() function. A typical srcset might look like srcset="image.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x", which lets the browser pick the right asset based on the current DPR.

Common Screen Resolutions

Full HD (1920 x 1080) remains the most common desktop resolution worldwide. According to the StatCounter Global Stats dashboard, around 20% of desktop traffic in March 2026 came from 1920x1080 screens, followed by 1366x768 and 2560x1440. Mobile is dominated by 390x844 (iPhone 13/14/15 base model) and 360x800 (mid-range Android).

Name	Resolution	Aspect Ratio	Typical Use
HD (720p)	1280 x 720	16:9	Budget laptops, older monitors
Full HD (1080p)	1920 x 1080	16:9	Most common desktop/laptop resolution
WUXGA	1920 x 1200	16:10	Productivity laptops, design work
QHD (1440p)	2560 x 1440	16:9	High-end monitors, gaming
4K UHD	3840 x 2160	16:9	Professional monitors, 4K TVs
5K	5120 x 2880	16:9	Apple Studio Display, 27-inch iMac
Ultrawide	3440 x 1440	21:9	LG, Dell, and Samsung ultrawides
Super Ultrawide	5120 x 1440	32:9	Samsung Odyssey G9 and similar
MacBook Air 13" (M2/M3)	2560 x 1664	~3:2	Reported as 1470 x 956 at 2x DPR
iPad Pro 12.9" (M4)	2048 x 2732	3:4	Reported as 1024 x 1366 at 2x DPR

macOS and iOS report CSS pixel dimensions, not hardware pixels. A MacBook Pro 14" with a 3024 x 1964 display at 2x DPR reports screen.width = 1512. Windows behaves similarly at fractional scaling: a 4K laptop at 150% reports a CSS width of around 2560.

CSS Breakpoints Reference

Responsive design uses CSS media queries to apply different styles at different viewport widths. The two most widely used conventions come from Tailwind CSS (mobile-first, min-width) and Bootstrap (mobile-first since v4, with a different grid of values). Both are documented in their official specifications.

Framework	Breakpoint	Width	Target Device Class
Tailwind CSS	sm	640px	Small phones landscape
Tailwind CSS	md	768px	Tablets
Tailwind CSS	lg	1024px	Laptops
Tailwind CSS	xl	1280px	Desktops
Tailwind CSS	2xl	1536px	Large desktops
Bootstrap 5	sm	576px	Landscape phones
Bootstrap 5	md	768px	Tablets
Bootstrap 5	lg	992px	Desktops
Bootstrap 5	xl	1200px	Large desktops
Bootstrap 5	xxl	1400px	Extra-large desktops

The live breakpoint bar in this tool lights up as you resize the window, so you can see the exact viewport width at which each breakpoint activates. For translating between units, the PX to REM Converter handles the most common conversion responsive designers need.

How Is Orientation Detected?

Orientation reports whether the screen is in portrait or landscape mode, using the screen.orientation API defined in the W3C Screen Orientation specification. The value is one of four strings: portrait-primary, portrait-secondary, landscape-primary, or landscape-secondary. The "secondary" variants indicate the device has been rotated 180 degrees from its default position.

Portrait is defined as a viewport where height is greater than width; landscape is the opposite. CSS media queries like @media (orientation: portrait) and @media (orientation: landscape) target this directly and are reliable across Chromium, Firefox, and Safari.

What Is Colour Depth?

Colour depth is the number of bits used per pixel to store colour information, reported by screen.colorDepth. Most consumer displays report 24-bit (True Color), which allocates 8 bits per channel for red, green, and blue. Newer HDR displays support 30-bit Deep Color (10 bits per channel) for smoother gradients and wider dynamic range.

Depth	Total Colours	Description
24-bit	16.7 million	Standard True Color, 8 bits per channel
30-bit	1.07 billion	Deep Color, 10 bits per channel, used in HDR10
36-bit	68.7 billion	12 bits per channel, Dolby Vision HDR
48-bit	281 trillion	16 bits per channel, professional imaging

Browsers historically reported 24-bit even on HDR-capable hardware, but Chromium-based browsers began exposing 30-bit for HDR content in late 2024 via the CSS Color Level 4 specification. Wide-gamut colour spaces like Display P3 and Rec. 2020 rely on this, and the Colour Contrast Checker can help verify that text remains WCAG-compliant at these wider gamuts.

Common Pitfalls

Several traps catch developers testing responsive sites:

• Scrollbar width: On Windows, a permanent vertical scrollbar reduces viewport width by 15-17px. Use 100vw carefully - it includes scrollbar width, which causes horizontal overflow.
• Mobile browser chrome: iOS Safari and Android Chrome shrink the URL bar on scroll, changing the viewport height. The 100vh unit can be larger than the visible area on first paint. Use 100dvh (dynamic viewport height) for reliable full-height layouts.
• Zoom and DPR: Browser zoom changes devicePixelRatio. A user at 125% zoom on a 1x display reports DPR 1.25, same as a Windows laptop at 125% scaling.
• Orientation on desktop: Desktop monitors always report landscape unless physically rotated via OS settings. Relying on orientation media queries for phone-vs-desktop logic is unreliable - use a width breakpoint instead.

For layout work, pairing this tool with the Aspect Ratio Calculator helps when designing around specific display shapes. All detection happens locally in your browser using the documented web APIs listed below.

Sources

• MDN Web Docs - Window.devicePixelRatio
• MDN Web Docs - Screen interface (screen.width, availWidth, colorDepth)
• W3C Screen Orientation Specification
• W3C CSS Values and Units Module Level 4
• Tailwind CSS - Responsive Design Breakpoints
• Bootstrap 5 - Breakpoints Documentation
• StatCounter Global Stats - Screen Resolution