Screen Resolution Checker

Screen Resolution vs Browser Viewport

Screen resolution is the total number of pixels your monitor or display can show, regardless of what's on screen, essentially the fixed hardware capability of your display. Browser viewport size is the visible area inside your browser window where a webpage actually renders. It's always smaller than the screen resolution once you account for the taskbar, browser toolbar, tabs, and address bar. That's why a design that "fits" your screen resolution can still get cut off in the actual browser window, a common point of confusion for anyone new to web design or troubleshooting a display issue.

Why "Available Screen Size" Differs From Screen Resolution

Available screen size subtracts space taken up by permanent system UI, like the Windows taskbar or macOS menu bar, from the full screen resolution. It's a more accurate picture of the space actually available to application windows. On a 1920×1080 display, for instance, a taskbar might take up 40 pixels of vertical space, leaving 1920×1040 actually available for windows to occupy, even though the underlying screen resolution remains 1920×1080 regardless of taskbar visibility.

Common Screen Resolutions and What They Mean

A handful of resolutions dominate modern displays. 1920×1080, often called Full HD or 1080p, remains extremely common for both monitors and laptop screens. 2560×1440, called QHD or 1440p, offers noticeably more screen space and is popular among gamers and professionals who want extra room without the cost of a 4K display. 3840×2160, called 4K or UHD, offers four times the pixel count of 1080p and has become increasingly common on both monitors and high-end laptops. Mobile phones use a wide range of resolutions, often reported in the same width-by-height format, but typically viewed at a higher device pixel ratio, which is why a phone's screen resolution number alone doesn't tell the whole story of how sharp or how much content actually fits on screen.

Why Web Designers Need to Know This

Understanding the gap between screen resolution and browser viewport is fundamental to responsive web design, the practice of building websites that adapt to different screen sizes rather than assuming one fixed layout. Designers and developers typically test layouts against viewport width, not raw screen resolution, since viewport width is what actually determines how much horizontal space a webpage has to work with. A common mistake for those new to web development is designing pixel-perfect layouts based on a specific screen resolution, only to discover the design breaks on viewports that don't match, since real users browse with all kinds of window sizes, taskbar configurations, and zoom levels that shrink the effective viewport below the full screen resolution.

Understanding Color Depth and Pixel Depth

Color depth, sometimes shown as bit depth, indicates how many distinct colors a display can theoretically produce, based on how many bits are used to represent each pixel's color. A common value is 24-bit color depth, which allows for roughly 16.7 million distinct colors, more than enough for the human eye to perceive as smooth, continuous color gradients without visible banding. Pixel depth is closely related and often reports the same figure, representing the total number of bits used per pixel across all color channels combined. Modern displays overwhelmingly report 24-bit or higher, and this value rarely varies meaningfully between typical consumer displays today, unlike screen resolution and viewport size, which vary considerably.

Screen Orientation: Portrait vs Landscape

Orientation describes whether a display is wider than it is tall, landscape, or taller than it is wide, portrait. Desktop and laptop monitors are almost universally used in landscape orientation, while phones and tablets frequently switch between both, depending on how the device is physically held. This tool detects and reports current orientation, which updates live if you rotate a mobile device or resize a desktop browser window into an unusually tall, narrow shape. Web designers account for orientation changes specifically when building layouts intended to work well on mobile devices, since a design optimized purely for landscape can look cramped or broken when a phone is rotated to portrait.

How This Differs Across Devices

Desktop monitors typically report their full native screen resolution with a device pixel ratio of 1, meaning CSS pixels map directly to physical pixels. Laptops, especially higher-end models, increasingly use high-density displays with a device pixel ratio above 1, meaning the reported screen resolution and viewport numbers already account for that scaling. Mobile phones almost universally use high device pixel ratios, often 2 or 3, which is why a phone's actual physical pixel count is often much higher than the CSS viewport dimensions this and most web tools report by default, a distinction covered in more detail in our Device Pixel Ratio Checker.

Testing Responsive Designs Across Screen Sizes

Developers commonly use browser developer tools to simulate different viewport sizes without needing physical access to every device, but checking real numbers on actual devices, like this tool provides, remains valuable for catching discrepancies that simulated testing sometimes misses. Real device testing accounts for actual browser chrome, taskbar configurations, and device pixel ratios that a simulated viewport in developer tools can approximate but not always perfectly replicate. Combining both approaches, quick simulated testing during development and real-device spot checks before launch, tends to catch the widest range of layout issues before they reach actual users.

Screen Resolution and Gaming Performance

Higher screen resolutions require significantly more graphics processing power to render smoothly, since a 4K display has four times as many pixels to draw as a 1080p display running the same content. This is why gamers often pay close attention to their exact resolution when choosing hardware, balancing visual sharpness against the frame rate their graphics hardware can sustain at that resolution. Checking a display's actual reported resolution with a tool like this one can help confirm that a monitor or game is running at the intended setting, rather than an unexpected fallback resolution that might occur due to a cable, driver, or configuration issue.

How Operating System Display Scaling Affects These Numbers

Modern operating systems often apply a scaling setting, commonly 100%, 125%, or 150% in Windows, that adjusts how content is sized on high-resolution displays without shrinking everything to an uncomfortably small size. This scaling directly affects the CSS pixel measurements this tool reports, since the browser respects the OS-level scaling setting when calculating viewport and effective resolution figures. A laptop with a genuinely high native resolution can report smaller CSS-pixel viewport numbers than its raw hardware resolution would suggest, purely because of this OS scaling layer sitting between the physical display and what the browser measures and reports.

Accessibility and Screen Resolution

Screen resolution and viewport size intersect with accessibility in a few important ways. Users with low vision often increase browser zoom or OS-level display scaling significantly beyond default settings, which reduces the effective viewport size this tool reports, sometimes dramatically. Websites built with accessibility in mind need to remain usable and readable even at these larger zoom levels and correspondingly smaller effective viewports, rather than breaking or requiring horizontal scrolling. Checking how a website's layout holds up at a range of simulated viewport sizes, including unusually narrow ones that mimic a heavily zoomed-in accessibility setup, is a practical way to catch these issues during development rather than after real users encounter them.

Multi-Monitor Setups and Screen Resolution

For anyone using multiple monitors, this tool reports the resolution and metrics of whichever display the current browser window is actively positioned on, not a combined figure across all connected monitors. Moving the browser window to a different monitor and refreshing, or simply resizing while the window straddles two displays, can produce different readings, since each monitor in a multi-monitor setup can have its own independent resolution, refresh rate, and pixel density, especially in mixed setups combining an older standard monitor with a newer high-resolution one.

Print Resolution vs Screen Resolution: A Common Confusion

Screen resolution, measured in total pixels, is a fundamentally different concept from print resolution, which is measured in dots per inch, or DPI, and describes pixel density rather than a total count. An image that looks sharp at full size on a screen can look pixelated when printed at a larger physical size, since printing requires a much higher pixel density, commonly 300 DPI for quality prints, than typical screen viewing does. This tool measures screen-related metrics only; anyone preparing images specifically for print needs a different set of considerations around DPI and physical output size rather than screen resolution and viewport figures.

How Refresh Rate Relates to (But Differs From) Resolution

Refresh rate, measured in Hertz, describes how many times per second a display updates its image, a completely separate specification from resolution, which describes how many pixels make up that image. A display can be high resolution with a low refresh rate, or lower resolution with a very high refresh rate; the two specifications are independent and both affect visual quality in different ways, sharpness for resolution, smoothness of motion for refresh rate. This tool doesn't measure refresh rate, since that information isn't exposed through standard web browser APIs the way screen resolution and viewport dimensions are, but it's worth understanding the distinction when researching or comparing displays.

Frequently Asked Questions

Why is my viewport size smaller than my screen resolution?

The viewport only measures the content area inside the browser window, excluding the browser's own toolbars, tabs, and bookmarks bar, plus any OS taskbar or dock, all of which reduce the space actually available to a webpage.

What does Device Pixel Ratio mean here?

It's the ratio between physical screen pixels and CSS pixels, a value of 2 means the display packs 2×2 physical pixels into every CSS pixel, common on high-density ("Retina" or HiDPI) screens. See our Device Pixel Ratio Checker for more detail.

Does resizing my browser window change the screen resolution?

No, screen resolution is a fixed property of your display (or changed only via system display settings). Resizing the browser window only changes the viewport size, which this page also shows.

Why does my browser's zoom level affect the numbers here?

Browser zoom changes how many CSS pixels fit within the physical viewport, so zooming in effectively reduces the reported viewport dimensions even though the underlying screen resolution and physical window size haven't changed at all.

What's considered a standard resolution for web design today?

There's no single universal standard, but many designers target a common range of viewport widths, roughly 320-480px for mobile, 768-1024px for tablets, and 1280px and above for desktop, using responsive design techniques rather than assuming one fixed resolution.

Does this tool work the same on mobile browsers?

Yes, the same measurements apply, though mobile devices typically show smaller viewport dimensions and often a higher device pixel ratio than desktop displays, both values this tool reports directly.