BrowserTools
Home / Misc / Screen Resolution and Display Info, What Is My Screen Size

Screen Resolution and Display Info, What Is My Screen Size

Check your screen resolution, viewport size, pixel ratio, color depth, HDR, refresh rate, and touch support instantly, detected locally in your browser.

Loading Screen Resolution and Display Info, What Is My Screen Size… If nothing happens, please enable JavaScript.

Wondering what your screen resolution is? This tool answers that question instantly, along with just about everything else your browser knows about your display. The moment the page loads, it reads your screen resolution in CSS pixels, estimates the physical pixel dimensions by multiplying by your device pixel ratio, and shows the available screen area (the space left after the operating system's taskbar or menu bar) plus the live size of the browser viewport itself. Resize the window or rotate your phone and the viewport figures update in real time, which makes the tool handy for responsive design work as well as simple curiosity.

Frequently asked questions

What is my screen resolution and why does it differ from my monitor's advertised resolution?
The tool shows your screen resolution in CSS pixels, which is what websites actually see. On high-density displays the operating system scales the interface, so a 4K monitor at 150 percent scaling reports 2560 x 1440 CSS pixels. The physical estimate row multiplies the CSS size by your device pixel ratio to recover the hardware figure, so both numbers are shown side by side.
What is device pixel ratio (DPR)?
Device pixel ratio is the number of physical hardware pixels used to draw one CSS pixel. A ratio of 1 means a standard-density screen, while 2 or 3 indicates a high-density display such as a Retina laptop or a modern phone. Fractional values like 1.25 or 1.5 usually come from operating system display scaling. A higher ratio means sharper text and images, because more hardware pixels render the same on-screen area.
What is the difference between screen resolution, available screen, and viewport?
Screen resolution is the full size of your display in CSS pixels. Available screen subtracts space permanently reserved by the operating system, such as the Windows taskbar or the macOS menu bar. The viewport is the inner area of your browser window where pages are actually rendered, so it shrinks when you make the window smaller. The viewport values on this page update live as you resize the window or rotate your device.
How is the refresh rate measured, and how accurate is it?
The tool samples 120 consecutive animation frames with requestAnimationFrame, takes the median time between frames, and converts it to hertz. On an idle system this reliably identifies common rates like 60, 90, 120, or 144 Hz. Heavy CPU load, battery-saver modes, or browser throttling can lower the reading, so treat it as an estimate and use the re-measure button to sample again under calmer conditions.
What do the color gamut values sRGB, P3, and Rec. 2020 mean?
They describe the range of colors your display and browser can reproduce. sRGB is the standard baseline that virtually every screen covers. Display P3 is roughly 25 percent wider and is common on recent phones, tablets, and premium laptops, delivering richer greens and reds. Rec. 2020 is a still wider gamut used by professional and HDR-oriented displays. The tool reports the widest gamut your browser says the display supports, using the color-gamut media query.
How do I know if my screen supports HDR?
The HDR row uses the dynamic-range media query: it shows yes when the browser reports that high dynamic range output is currently active on this display. Note that HDR often depends on more than the panel itself; the operating system setting, the cable, and the browser must all support it. If you own an HDR monitor but the tool says no, check that HDR is switched on in your system's display settings.
Why does the tool say my device supports touch when my laptop has no touchscreen, or vice versa?
Touch detection relies on what the browser exposes, and some drivers or browsers report touch events on hardware without a touchscreen, or the reverse. That is why the tool also shows max touch points and the pointer media queries: a primary pointer of fine means a mouse or trackpad, coarse means a finger, and the any-pointer row lists every input type attached. Together these give a much more reliable picture than a single yes or no.
What does color depth mean?
Color depth is the number of bits used to describe the color of one pixel. The common value of 24 bits means 8 bits per red, green, and blue channel, about 16.7 million colors. Some HDR-capable systems report 30 bits, which allows over a billion shades and smoother gradients. The value shown is what your browser reports for the current screen.
Do the values update when I resize the window or rotate my device?
Yes. The tool listens for resize and orientation changes, so the viewport size, orientation, and related values refresh immediately as you drag the window edge or turn your phone or tablet. This live behavior makes it useful as a quick reference while testing responsive layouts and CSS breakpoints.
Is any of my display information uploaded or stored?
No. Every value is read locally by your browser using standard JavaScript properties and CSS media queries, and it is displayed only on your screen. Nothing is sent to a server, logged, or saved. The copy button simply places the report on your own clipboard as plain text so you can paste it wherever you need it.

About Screen Resolution and Display Info, What Is My Screen Size

Modern displays are more complicated than a single width-by-height number, and this page surfaces the details that usually stay hidden. The device pixel ratio tells you whether you are on a standard-density or high-density (Retina-class) screen, and the physical pixel estimate shows what that means in practice: a laptop reporting 1440 x 900 CSS pixels at a ratio of 2 is actually driving 2880 x 1800 physical pixels. You also get your screen's color depth in bits, the widest color gamut your browser reports (sRGB, Display P3, or Rec. 2020), whether high dynamic range output is currently active, and which color scheme (light or dark) your system asks websites to use.

The tool also estimates your display's refresh rate directly in the browser. It samples 120 animation frames using requestAnimationFrame, takes the median frame interval, and converts it to hertz, so a 60 Hz office monitor, a 120 Hz phone, and a 144 Hz gaming panel each produce visibly different readings. Because browsers can throttle frame delivery under load or in power-saving modes, a re-measure button lets you run the sampling again whenever you want a fresh reading. Alongside the display data you get an input capability report: whether touch is available and how many simultaneous touch points are supported, whether your primary pointer is fine (mouse, trackpad) or coarse (finger), what other pointer types are attached, whether hovering is possible, and whether your system requests reduced motion.

Everything on this page is read locally by your own browser using standard web APIs and CSS media queries; nothing is uploaded, logged, or stored on any server. That makes it a quick, safe way to answer common questions: confirming a monitor is running at its native resolution, checking whether a new phone really has the high refresh rate screen it advertised, verifying HDR and wide color gamut support before editing photos, or grabbing the exact numbers a support technician or web developer asked for. A copy button exports the full report as plain text so you can paste it into an email, a bug ticket, or a chat in one click.

From 320 x 200 to 8K: How Screen Resolutions Grew Up

For most of the 1980s, personal computer users lived with resolutions that sound almost implausible today. IBM's CGA standard from 1981 offered 320 x 200 pixels with four colors, and the 640 x 480 VGA standard of 1987 was such a leap that it remained the baseline safe resolution for software installers and boot screens for two decades. The pixel counts climbed through SVGA and XGA in the 1990s, but the real turning point was the shift from bulky CRT tubes to flat LCD panels around the year 2000, which fixed each display at a native pixel grid and made the exact resolution a headline specification rather than an adjustable afterthought.

The next revolution was density rather than size. When Apple introduced the Retina display on the iPhone 4 in 2010, it doubled the pixels in each direction while keeping the screen dimensions the same, and the industry adopted the trick of separating physical pixels from logical ones. This is exactly why this tool distinguishes CSS pixels from the physical estimate: a modern phone might render websites at 390 logical pixels wide while its panel actually contains 1170 physical columns, a device pixel ratio of 3. Without that separation, text and buttons designed for older screens would appear microscopically small on new ones.

Refresh rate followed the same path from stable standard to competitive feature. Nearly everything ran at 60 Hz for decades, a legacy of CRT timing and mains power frequencies, until esports monitors normalized 144 Hz and beyond, and phone makers began shipping 90 and 120 Hz panels around 2019. Meanwhile resolution marketing marches on: 4K displays quadruple the pixels of Full HD, 8K quadruples them again to over 33 million pixels, and wide color gamuts like Display P3 and Rec. 2020 push the range of reproducible colors far past the sRGB standard defined back in 1996. The humble question of what is my screen resolution now has a surprisingly layered answer, which is precisely what this page unpacks.

Support