🔍 /

Viewport Size Checker - Real-Time Screen Resolution & DPI Tool

Instantly check your browser viewport size, screen resolution, aspect ratio, and pixel density. Essential for responsive web design testing.

User Rating 0.0 ★★★★★
Total Usage 0 times
Category CSS Tools
Viewport Dimensions
0 × 0 px
Loading...
Screen Resolution
0 x 0
Physical Pixels
Aspect Ratio
-:-
GCD Simplified
Pixel Density (DPR)
1.0
dppx
Orientation
Landscape
Angle: 0°

Deep Dive Stats

Outer Window 0 x 0
Available Screen 0 x 0
Color Depth 24-bit
Touch Support No
Scrollbar Width 0px

Current Media Query

@media (min-width: 0px) and (max-width: 0px) { ... }
XS
SM
MD
LG
XL
XXL
Current Width
Is this tool helpful?

Your feedback helps us improve.

★ ★ ★ ★ ★

About

Responsive Web Design (RWD) relies heavily on understanding the exact available space within the browser window, known as the Viewport. Unlike the physical screen resolution, the viewport dimensions change dynamically as users resize windows, open developer tools, or rotate devices.

This tool provides a live feed of your current dimensions, separating inner_width (the CSS rendering area) from outer_width (the browser window size). It calculates the precise aspect ratio using the Euclidean algorithm for GCD and detects the Device Pixel Ratio (dpr) to help you optimize high-density (Retina) assets.

viewport screen resolution responsive design css breakpoints pixel density

Formulas

The Aspect Ratio is calculated by dividing the width w and height h by their Greatest Common Divisor (GCD).

GCD(a, b) =
{
a if b = 0GCD(b, a % b) otherwise

CSS Media Queries rely on the viewport width:

@media (min-width: 768px) ∧ (max-width: 1024px)

Reference Data

Device / StandardViewport (px)Aspect RatioDPR
Mobile S (iPhone SE)320 × 56840:712.0
Mobile M (iPhone 12/13/14)390 × 844195:4223.0
Mobile L (Pixel 7)412 × 915206:4572.6
Tablet (iPad Mini)768 × 10243:42.0
Tablet Pro (iPad Pro 12.9)1024 × 13663:42.0
Laptop (13-inch)1280 × 8008:52.0
Desktop HD1920 × 108016:91.0
Desktop 4K3840 × 216016:91.0

Frequently Asked Questions

Screen resolution refers to the physical pixels on your monitor (e.g., 1920x1080). Viewport size is the area available for the website to render, which is affected by the browser window size, scrollbars, and OS UI scaling (DPI).
DPR is the ratio between physical screen pixels and logical CSS pixels. A DPR of 2.0 means one CSS pixel is rendered using a 2x2 grid of physical pixels, common in Retina displays for sharper text and images.
Yes. The tool distinguishes between Inner Width (excluding browser UI but including scrollbars in some OSs) and Client Width (excluding scrollbars). The calculation window.innerWidth - document.documentElement.clientWidth reveals the scrollbar thickness.
Use the "Current Width" value to determine where your layout breaks. Common breakpoints are 576px (Mobile), 768px (Tablet), 992px (Desktop), and 1200px (Large Desktop).