Screen Resolution Checker

Continue in the tool

More pages for this tool

css pixels and device pixel ratio

CSS pixels and devicePixelRatio

screen.width and screen.height describe the whole screen in CSS pixels, window.innerWidth measures only the viewport visible inside the browser, and devicePixelRatio (DPR) counts how many physical pixels the display uses to draw a single CSS pixel. This calculator lays the three numbers side by side to end the confusion between them.

Three measurements, three different jobs

screen.width and screen.height report the monitor total resolution in CSS pixels, including the area taken up by taskbars and other windows: it is a hardware value adjusted by the operating system scale factor, not the area the page actually occupies. window.innerWidth and window.innerHeight, on the other hand, measure only the viewport, the content area inside the browser, excluding the address bar, tabs and scrollbars, and that pair of numbers is exactly what media queries and responsive layout should consult.
devicePixelRatio is the ratio between the panel physical pixels and the layout CSS pixels: on an ordinary screen, DPR equals 1 and each CSS pixel occupies exactly one physical pixel; on a high-density display, DPR can equal 2 or 3. A concrete example: on a screen with DPR 2, a viewport that is 390 CSS pixels wide occupies 780 real physical pixels, double along each axis, because the browser draws every CSS pixel using a grid of physical pixels the size of the DPR.
A CSS pixel is not defined by a fixed physical size, but by reference to a visual angle: the W3C CSS Values and Units specification fixes the reference pixel as the angle subtended by an observer at a typical reading distance, and that is why the same `width: 100px` value looks roughly the same size on a phone held in hand and on a desktop monitor, even though the two devices can have completely different physical pixel densities.

Three DPR readings in practice

Common external monitor

Input: screen: 1920 × 1080, DPR: 1
Expected output: Viewport física ≈ igual à CSS: 1920 × 1080 pixels físicos

DPR 1 is the default on older external monitors and on most office displays: every CSS pixel in the layout corresponds to exactly one physical pixel on the panel, with no rescaling by the browser.

Laptop with a HiDPI screen

Input: viewport: 390 px CSS, DPR: 2
Expected output: Pixels físicos usados: 780 × altura correspondente

Multiplying the viewport width by the DPR gives the count of physical pixels the panel actually lights up to draw that viewport, useful for knowing which image resolution to export without wasting bandwidth.

Phone with DPR 3

Input: screen.width: 430 px CSS, DPR: 3
Expected output: Pixels físicos por eixo: 1290

Flagship phone screens commonly run DPR 3, so a `srcset` image with a `3x` descriptor needs three times the element width in pixels or it will blur under pinch zoom.

Full tool FAQ

What is the difference between screen resolution, viewport and physical resolution?

Screen resolution (screen.width and screen.height) is the size of the whole display as the browser reports it, in CSS pixels. The viewport (window.innerWidth and innerHeight) is only the area where the page is drawn, so it shrinks with the window, toolbars, sidebars and page zoom. Physical resolution is the real number of pixels on the panel, which this tool estimates as CSS pixels times the devicePixelRatio. On a plain monitor at 100% scaling they match, on phones and scaled laptops they differ a lot.

Why does my browser show a different resolution from my monitor's specification?

What is DPR and what does Retina mean?

How can I find out my screen refresh rate?

1080p vs 1440p vs 4K: what is the difference?

How do I change the screen resolution on Windows?

How do I change the screen resolution on macOS?

How do I change the screen resolution on Linux?

Can I change the screen resolution on Android or iPhone?

Which breakpoint am I on, and why do breakpoints use the viewport?

How is PPI calculated and what is the viewing distance?

Does this tool collect or send my data, and is it fingerprinting?

Frequently asked questions

Does browser zoom change devicePixelRatio?

Yes: increasing page zoom raises the DPR the browser reports by the same proportion, because zoom redraws the content with more physical pixels per CSS pixel; that is why devicePixelRatio should be read again on every resize event, never cached at page load.

Why does `srcset` use descriptors like `2x` and `3x`?

Because those descriptors tell the browser which image to pick based on the device DPR without CSS having to change: on a DPR 2 screen, the browser downloads the version marked `2x`, which has double the physical pixels of the base version, keeping the result sharp without resizing the image at runtime.

Can screen.width and window.innerWidth be equal?

They can, when the browser window is maximized with no operating system side panel visible, but window.innerWidth is normally smaller, since it subtracts the scrollbar area and the browser own chrome; never assume the two values match in production.

What is matchMedia('(min-resolution: 2dppx)') for?

It applies conditional CSS to high-density screens without depending on runtime JavaScript: the `min-resolution` media query compares the device DPR directly against the given threshold, letting you swap a background-image for a higher-resolution version only when the panel actually has enough physical pixels to make use of it.

Next steps

Breakpoint	From	Up to
`base`	0 px	639 px
`sm`	640 px	767 px
`md`	768 px	1,023 px
`lg`	1,024 px	1,279 px
`xl`	1,280 px	1,535 px
`2xl`	1,536 px	and above

Breakpoint

From

Up to

base

0 px

639 px

sm

640 px

767 px

md

768 px

1,023 px

lg

1,024 px

1,279 px

xl

1,280 px

1,535 px

2xl

1,536 px

and above

Breakpoint	From	Up to
`xs`	0 px	575 px
`sm`	576 px	767 px
`md`	768 px	991 px
`lg`	992 px	1,199 px
`xl`	1,200 px	1,399 px
`xxl`	1,400 px	and above

Breakpoint

From

Up to

xs

0 px

575 px

sm

576 px

767 px

md

768 px

991 px

lg

992 px

1,199 px

xl

1,200 px

1,399 px

xxl

1,400 px

and above

How your resolution compares
Name	Resolution	Megapixels	Ratio	vs 1080p
HD (720p)	1,280 × 720	0.92	16:9	0.44×
WXGA (HD 768p)	1,366 × 768	1.05	16:9	0.51×
HD+ (900p)	1,600 × 900	1.44	16:9	0.69×
Full HD (1080p)	1,920 × 1,080	2.07	16:9	1×
WUXGA	1,920 × 1,200	2.3	16:10	1.11×
QHD (1440p)	2,560 × 1,440	3.69	16:9	1.78×
UltraWide QHD (UWQHD)	3,440 × 1,440	4.95	21:9	2.39×
4K UHD (2160p)	3,840 × 2,160	8.29	16:9	4×
5K	5,120 × 2,880	14.75	16:9	7.11×
8K UHD (4320p)	7,680 × 4,320	33.18	16:9	16×

How your resolution compares

Name

Resolution

Megapixels

Ratio

vs 1080p

HD (720p)

1,280 × 720

0.92

16:9

0.44×

WXGA (HD 768p)

1,366 × 768

1.05

16:9

0.51×

HD+ (900p)

1,600 × 900

1.44

16:9

0.69×

Full HD (1080p)

1,920 × 1,080

2.07

16:9

1×

WUXGA

1,920 × 1,200

2.3

16:10

1.11×

QHD (1440p)

2,560 × 1,440

3.69

16:9

1.78×

UltraWide QHD (UWQHD)

3,440 × 1,440

4.95

21:9

2.39×

4K UHD (2160p)

3,840 × 2,160

8.29

16:9

4×

5,120 × 2,880

14.75

16:9

7.11×

8K UHD (4320p)

7,680 × 4,320

33.18

16:9

16×

Continue in the tool

Open full tool

css pixels and device pixel ratio

CSS pixels and devicePixelRatio

Three measurements, three different jobs

screen.width and screen.height report the monitor total resolution in CSS pixels, including the area taken up by taskbars and other windows: it is a hardware value adjusted by the operating system scale factor, not the area the page actually occupies. window.innerWidth and window.innerHeight, on the other hand, measure only the viewport, the content area inside the browser, excluding the address bar, tabs and scrollbars, and that pair of numbers is exactly what media queries and responsive layout should consult.

devicePixelRatio is the ratio between the panel physical pixels and the layout CSS pixels: on an ordinary screen, DPR equals 1 and each CSS pixel occupies exactly one physical pixel; on a high-density display, DPR can equal 2 or 3. A concrete example: on a screen with DPR 2, a viewport that is 390 CSS pixels wide occupies 780 real physical pixels, double along each axis, because the browser draws every CSS pixel using a grid of physical pixels the size of the DPR.

A CSS pixel is not defined by a fixed physical size, but by reference to a visual angle: the W3C CSS Values and Units specification fixes the reference pixel as the angle subtended by an observer at a typical reading distance, and that is why the same `width: 100px` value looks roughly the same size on a phone held in hand and on a desktop monitor, even though the two devices can have completely different physical pixel densities.

Three DPR readings in practice

Common external monitor

Input: screen: 1920 × 1080, DPR: 1
Expected output: Viewport física ≈ igual à CSS: 1920 × 1080 pixels físicos

DPR 1 is the default on older external monitors and on most office displays: every CSS pixel in the layout corresponds to exactly one physical pixel on the panel, with no rescaling by the browser.

Laptop with a HiDPI screen

Input: viewport: 390 px CSS, DPR: 2
Expected output: Pixels físicos usados: 780 × altura correspondente

Phone with DPR 3

Input: screen.width: 430 px CSS, DPR: 3
Expected output: Pixels físicos por eixo: 1290

Flagship phone screens commonly run DPR 3, so a `srcset` image with a `3x` descriptor needs three times the element width in pixels or it will blur under pinch zoom.

Full tool FAQ

What is the difference between screen resolution, viewport and physical resolution?

Why does my browser show a different resolution from my monitor's specification?

What is DPR and what does Retina mean?

How can I find out my screen refresh rate?

1080p vs 1440p vs 4K: what is the difference?

How do I change the screen resolution on Windows?

How do I change the screen resolution on macOS?

How do I change the screen resolution on Linux?

Can I change the screen resolution on Android or iPhone?

Which breakpoint am I on, and why do breakpoints use the viewport?

How is PPI calculated and what is the viewing distance?

Does this tool collect or send my data, and is it fingerprinting?

Frequently asked questions

Does browser zoom change devicePixelRatio?

Why does `srcset` use descriptors like `2x` and `3x`?

Can screen.width and window.innerWidth be equal?

What is matchMedia('(min-resolution: 2dppx)') for?

Breakpoint	From	Up to
`base`	0 px	639 px
`sm`	640 px	767 px
`md`	768 px	1,023 px
`lg`	1,024 px	1,279 px
`xl`	1,280 px	1,535 px
`2xl`	1,536 px	and above

Breakpoint

From

Up to

base

0 px

639 px

sm

640 px

767 px

md

768 px

1,023 px

lg

1,024 px

1,279 px

xl

1,280 px

1,535 px

2xl

1,536 px

and above

Breakpoint	From	Up to
`xs`	0 px	575 px
`sm`	576 px	767 px
`md`	768 px	991 px
`lg`	992 px	1,199 px
`xl`	1,200 px	1,399 px
`xxl`	1,400 px	and above

Breakpoint

From

Up to

xs

0 px

575 px

sm

576 px

767 px

md

768 px

991 px

lg

992 px

1,199 px

xl

1,200 px

1,399 px

xxl

1,400 px

and above

How your resolution compares
Name	Resolution	Megapixels	Ratio	vs 1080p
HD (720p)	1,280 × 720	0.92	16:9	0.44×
WXGA (HD 768p)	1,366 × 768	1.05	16:9	0.51×
HD+ (900p)	1,600 × 900	1.44	16:9	0.69×
Full HD (1080p)	1,920 × 1,080	2.07	16:9	1×
WUXGA	1,920 × 1,200	2.3	16:10	1.11×
QHD (1440p)	2,560 × 1,440	3.69	16:9	1.78×
UltraWide QHD (UWQHD)	3,440 × 1,440	4.95	21:9	2.39×
4K UHD (2160p)	3,840 × 2,160	8.29	16:9	4×
5K	5,120 × 2,880	14.75	16:9	7.11×
8K UHD (4320p)	7,680 × 4,320	33.18	16:9	16×

How your resolution compares

Name

Resolution

Megapixels

Ratio

vs 1080p

HD (720p)

1,280 × 720

0.92

16:9

0.44×

WXGA (HD 768p)

1,366 × 768

1.05

16:9

0.51×

HD+ (900p)

1,600 × 900

1.44

16:9

0.69×

Full HD (1080p)

1,920 × 1,080

2.07

16:9

1×

WUXGA

1,920 × 1,200

2.3

16:10

1.11×

QHD (1440p)

2,560 × 1,440

3.69

16:9

1.78×

UltraWide QHD (UWQHD)

3,440 × 1,440

4.95

21:9

2.39×

4K UHD (2160p)

3,840 × 2,160

8.29

16:9

4×

5,120 × 2,880

14.75

16:9

7.11×

8K UHD (4320p)

7,680 × 4,320

33.18

16:9

16×

Continue in the tool

More pages for this tool

CSS pixels and devicePixelRatio

Three measurements, three different jobs

Three DPR readings in practice

Common external monitor

Laptop with a HiDPI screen

Phone with DPR 3

Full tool FAQ

Frequently asked questions

Does browser zoom change devicePixelRatio?

Why does `srcset` use descriptors like `2x` and `3x`?

Can screen.width and window.innerWidth be equal?

What is matchMedia('(min-resolution: 2dppx)') for?

Next steps

Tailwind CSS

Bootstrap 5

Continue in the tool

More pages for this tool

CSS pixels and devicePixelRatio

Three measurements, three different jobs

Three DPR readings in practice

Common external monitor

Laptop with a HiDPI screen

Phone with DPR 3

Full tool FAQ

Frequently asked questions

Does browser zoom change devicePixelRatio?

Why does `srcset` use descriptors like `2x` and `3x`?

Can screen.width and window.innerWidth be equal?

What is matchMedia('(min-resolution: 2dppx)') for?

Next steps

Tailwind CSS

Bootstrap 5