Screen Size Checker
Check your current screen resolution, browser viewport size, pixel ratio, and responsive design breakpoint. Updates live as you resize your window.
Try resizing your browser window - these values update live
Recommended Settings
Pro Tips
- •Viewport size is the visible browser window area (what your page actually renders into), while screen resolution is your entire monitor's native resolution
- •Device pixel ratio above 1x means the display packs multiple physical pixels into each CSS pixel, common on phones and high-DPI "Retina" displays
- •The responsive breakpoint categories shown here are common conventions, roughly matching what many CSS frameworks use, though exact breakpoints vary between frameworks
- •Resize your browser window while this page is open to see the numbers update live, which is useful for testing responsive layouts
Most Popular
Most users check viewport size while testing how a website's layout adapts across screen sizes
When to Use This Tool
Check your current viewport dimensions while testing how a website's layout responds to resizing.
Include exact screen and viewport details when reporting a layout bug.
See which responsive breakpoint category your current window size falls into.
Check your device pixel ratio to understand how images and icons will render on your screen.
How It Works
Read the browser's inner window dimensions for viewport size, and the screen object's dimensions for full display resolution
Read devicePixelRatio to determine how many physical pixels correspond to each CSS pixel
Re-read all values automatically whenever the window is resized
100% Private
Files never leave your device. All processing happens locally in your browser.
Lightning Fast
Powered by Browser native Window and Screen APIs for optimal performance on modern browsers.
Open Source
Built with verified, open-source libraries. Fully transparent.
Frequently Asked Questions
What's the difference between viewport size and screen resolution?
Viewport size is the visible area of your browser window where web content is rendered - it shrinks if you resize the browser window or open dev tools. Screen resolution is your monitor's fixed native resolution, regardless of how large your browser window is.
What does device pixel ratio mean?
It's the ratio between physical screen pixels and CSS pixels. A ratio of 2x means each CSS pixel is rendered using a 2×2 grid of physical pixels, common on high-resolution "Retina"-style displays, resulting in sharper text and images.
Is this data sent to a server?
No. All values are read and displayed entirely locally in your browser using JavaScript. Nothing is transmitted anywhere, including to this website's own servers.
Why do the breakpoint categories not match my CSS framework exactly?
Different CSS frameworks (Bootstrap, Tailwind, Material UI, etc.) define their own specific breakpoint values. This tool uses common, widely-recognized ranges as a general reference, not any one framework's exact numbers.
Why did my viewport size change without resizing the window?
Opening browser developer tools, zooming the page, or the appearance of scrollbars can all change the effective viewport size even if the outer browser window stays the same size.