What Is My Screen Resolution?
This tool shows you everything about your screen and browser display settings. It detects your full screen resolution, the size of your browser's viewport, your device pixel ratio, color depth, and whether your screen is in portrait or landscape orientation. This information is useful when testing how a website looks on your screen, when reporting display issues to a support team, or when shopping for a monitor and comparing resolutions. Everything updates automatically when the page loads.
Your display information is detected automatically below. Resize your browser window to see the viewport update live.
Frequently Asked Questions
What is screen resolution?
Screen resolution is the number of pixels on your display, expressed as width by height (for example, 1920x1080). Higher resolution means more pixels and sharper images. The most common desktop resolution today is 1920x1080, called Full HD.
What is the difference between screen resolution and viewport size?
Screen resolution is your display's total pixels. The viewport is the visible area inside your browser window. Viewport size is smaller because it excludes the browser toolbar, address bar, taskbar, and other interface elements.
What is device pixel ratio?
Device pixel ratio (DPR) is how many physical pixels map to each CSS pixel. Retina and high-DPI displays have a ratio of 2 or higher, packing more pixels into the same space for sharper text and graphics. Standard displays have a ratio of 1.
How do I change my screen resolution in Windows?
Right-click your desktop and choose Display Settings. Scroll to Display Resolution and pick from the dropdown. Choose the one marked Recommended, which is your monitor's native resolution for the sharpest display.
Why does my resolution look different on a laptop vs a desktop monitor?
Laptops often use high-DPI screens with scaling applied by the operating system, so the reported CSS resolution may differ from the physical pixels. A laptop showing 1920x1080 in CSS may have a physical display of 3840x2160 with 200% scaling applied.
What is the most common screen resolution in 2024?
As of 2024, 1920x1080 (Full HD) is still the most common desktop resolution globally at around 25-30% of users. On mobile, the most common resolutions are in the 1080x2340 range (portrait). For web design, target a flexible layout that works from 360px (smallest mobile) up to 2560px (2K monitors), using responsive breakpoints at 768px, 1024px, and 1280px as starting points.
How does screen resolution affect web design?
Developers use CSS pixels (logical resolution) not physical pixels. A 4K monitor at 200% scaling still reads as 1920x1080 in CSS. Device pixel ratio (DPR) tells you how many physical pixels exist per CSS pixel — a DPR of 2 means a Retina display. For sharp images on high-DPR screens, serve 2x or 3x resolution images using srcset or a CSS media query targeting min-resolution: 2dppx.
What is the difference between screen resolution and viewport size?
Screen resolution is the total pixel count of your display hardware. Viewport size is the area of the browser window available for content, which is always smaller — it excludes the OS taskbar, browser chrome, and scrollbars. Responsive design breakpoints should be based on viewport width (window.innerWidth), not screen resolution (screen.width), because users rarely browse in fullscreen.
How It Works
This tool reads screen.width and screen.height (physical CSS resolution), window.innerWidth and window.innerHeight (viewport, excluding browser chrome), and window.devicePixelRatio (physical pixels per CSS pixel). All values come from the browser's JavaScript API and reflect the current window state — resize the window and reload to see viewport values update.
CSS Pixels vs Physical Pixels
CSS pixels are logical units — one CSS pixel equals one devicePixelRatio physical pixels. On a Retina display with DPR 2, a 1px CSS border is rendered as 2 physical pixels, making it look sharp. Web design is done in CSS pixels; image resolution should account for DPR to avoid blurry graphics on high-density screens.
Responsive Design Breakpoints
Common CSS breakpoints by viewport width: under 480px (small mobile), 481-768px (mobile/tablet portrait), 769-1024px (tablet landscape/small laptop), 1025-1280px (laptop), 1281px and up (desktop). Always design mobile-first — start with the narrowest layout and add complexity as width increases using min-width media queries.
When to Use This
Use to tell a developer your exact screen and viewport dimensions when reporting a layout bug, to verify a responsive breakpoint is triggering correctly during testing, to check what resolution a client or user is seeing before advising on design changes, or to identify whether high DPR is the cause of blurry images on a particular device.
More Free Tools
Email Extractor
Paste any block of text and pull out all email addresses in one click.
Color Converter
Convert color codes between HEX, RGB, and HSL formats with a visual picker.
Robots.txt Viewer
Enter any domain to view its robots.txt and see which pages are blocked from Google.
Lorem Ipsum Generator
Generate placeholder text by the paragraph, sentence, or word for any layout.