What is the difference between Screen and Viewport?

Screen resolution is the total number of pixels on your physical monitor. Viewport is the visible area within your browser window, which changes as you resize the browser.

Why does it show a lower resolution on mobile?

Mobile devices use 'CSS pixels' which are different from physical pixels due to high-density displays (Retina). Check the 'Device Pixel Ratio' to see the scaling factor.

Screen Resolution Tester — Check Viewport Size

How to Use the Screen Resolution Tester

This tool works automatically. As soon as you load the page (or resize your browser window), it detects and updates three key metrics:

Screen Resolution

The total pixel dimensions of your physical monitor (e.g., 1920x1080). This doesn't change when you resize the browser.

Viewport Size

The visible area inside your browser window. This is what responsive websites respond to (via CSS Media Queries).

Pixel Ratio (DPR)

The density of pixels. A ratio of "2.0" (Retina) means there are 2 physical pixels for every 1 CSS pixel.

Why Viewport Size Matters

In modern web design, websites must adapt to thousands of different screen sizes, from massive 4k desktop monitors to tiny smartwatches.

Developers use "Breakpoints" in their CSS to change the layout based on the viewport width. Common breakpoints include:

Mobile: < 640px (Single column layout)
Tablet: 768px - 1024px (Two column layout)
Desktop: > 1024px (Full multi-column layout)

Developer Tip

Resize your browser window while watching the "Viewport" stats above. You will see the numbers update in real-time, helping you debug exactly when your layout breaks.