User Rating 0.0 ★★★★★

Total Usage 0 times

Category CSS Tools

Real-Time Diagnostics

Viewport Width

---

Viewport Height

---

Device Pixel Ratio (DPR)

---

Scaling Factor

Aspect Ratio

---

Screen Resolution

---

Physical (Logical)

Color Depth

---

Bits per Pixel

Orientation

---

Angle: 0°

Browser Engine

---

User Agent Detection

CSS Media Query Snippet

@media (min-width: 0px) { ... }

Device Emulator Check

Compare Viewport To:

Select a device to compare dimensions.

Is this tool helpful?

Your feedback helps us improve.

★ ★ ★ ★ ★

About

In the landscape of modern web development, the distinction between physical hardware pixels and CSS logical pixels is critical. A Viewport represents the visible area of a web page, which often differs from the monitor's physical resolution due to scaling factors like the Device Pixel Ratio (DPR). Precise measurement of these values is mandatory for implementing fluid layouts and ensuring quality assurance across a fragmented device ecosystem.

This utility provides instantaneous, real-time telemetry of the browser environment. It dissects the window and screen objects to expose granular metrics: viewport geometry, color depth, orientation, and aspect ratios. Unlike basic resize listeners, this tool calculates the Greatest Common Divisor (GCD) to determine simplified aspect ratios and compares current dimensions against a verified database of industry-standard devices.

Formulas

The Aspect Ratio (R) is derived by simplifying the fraction of width (W) to height (H). This requires finding the Greatest Common Divisor (gcd).

{

gcd(a, 0) = agcd(a, b) = gcd(b, a mod b)

The simplified width component w_s and height component h_s are calculated as:

w_s = Wgcd(W, H), h_s = Hgcd(W, H)

CSS Pixels (px_css) vs Physical Pixels (px_phys) relationship via Device Pixel Ratio (dpr):

px_phys ≈ px_css × dpr

Reference Data

Device Name	Viewport (WxH)	DPR	Screen Size
iPhone 15 Pro Max	430 × 932	3.0	6.7″
iPhone 15 / 15 Pro	393 × 852	3.0	6.1″
iPhone 14 Plus	428 × 926	3.0	6.7″
iPhone 13 / 14	390 × 844	3.0	6.1″
iPhone SE (3rd Gen)	375 × 667	2.0	4.7″
iPad Pro 12.9″	1024 × 1366	2.0	12.9″
iPad Air (5th Gen)	820 × 1180	2.0	10.9″
iPad Mini (6th Gen)	744 × 1133	2.0	8.3″
Samsung Galaxy S24 Ultra	412 × 915	3.5	6.8″
Samsung Galaxy S23	360 × 780	3.0	6.1″
Google Pixel 8 Pro	412 × 915	3.5	6.7″
Google Pixel 7	412 × 915	3.0	6.3″
Desktop FHD	1920 × 1080	1.0	24″+
Desktop 4K UHD	3840 × 2160	1.0+	27″+
MacBook Air M2	1440 × 900	2.0	13.6″
MacBook Pro 16″	1728 × 1117	2.0	16.2″
Surface Pro 9	1440 × 960	2.0	13″

Frequently Asked Questions

Browsers report "CSS Pixels" (Logical Resolution), not physical hardware pixels. High-DPI (Retina) screens use a scaling factor called Device Pixel Ratio (DPR). For example, a 4K screen (3840 physical pixels) with a 200% scale (DPR 2) will report a viewport width of 1920 CSS pixels.

The generated snippet is a standard CSS conditional rule. Copy the block into your CSS file. The `min-width` query applies styles only when the browser is at least as wide as your current viewport, while `max-width` limits styles to sizes smaller than the current state.

No. The Web API security model prevents browsers from accessing physical screen dimensions (e.g., "24 inches") to prevent user fingerprinting. We can only access the resolution in pixels and the color depth.

`window.innerWidth` is the width of the viewport (the web page content area), which changes when you resize the browser window. `screen.width` is the total width of your monitor's display area and remains constant regardless of the browser window size.