English
What Is My Screen Resolution
Detect your screen resolution, viewport, DPR, color depth, and orientation instantly.
Your Screen Resolution
Visual Representation
Common Screen Resolutions
Live Resize Monitor
What is What Is My Screen Resolution?
What Is My Screen Resolution is an online tool that detects and displays your current screen resolution, browser viewport, device pixel ratio, color depth, orientation, and related display properties. The tool runs entirely in your browser and requires no button click or form submission to detect your screen. As soon as you open the page, it reads your screen dimensions, viewport size, and other display characteristics using JavaScript and displays them in a clear, organized layout. The tool shows a hero resolution display (e.g., 1920 × 1080 pixels), quick info cards for screen size, viewport, pixel ratio, and aspect ratio, a visual representation of your screen and viewport, a detailed table with all detected properties, a reference section of common resolutions, and a live resize monitor that updates in real time as you resize your browser window. No registration is required, and the tool works on desktop, tablet, and mobile devices.
Screen resolution is the number of horizontal and vertical pixels that make up your display. A 1920×1080 screen has 1,920 pixels across and 1,080 pixels down, totaling 2,073,600 pixels. This is often called Full HD or 1080p. The browser viewport is the visible area inside your browser window—it excludes the address bar, bookmarks bar, and other browser chrome. On a 1920×1080 screen, the viewport might be 1920×969 or similar, depending on the browser and window size. The device pixel ratio (DPR) indicates how many physical pixels correspond to one CSS pixel. A Retina display might have a DPR of 2, meaning each CSS pixel is rendered with 4 physical pixels (2×2). Understanding these values helps developers design responsive layouts, test breakpoints, and optimize images for different screen densities.
The tool uses the Screen API and Window API available in modern browsers. The `screen.width` and `screen.height` properties give the total screen resolution. The `window.innerWidth` and `window.innerHeight` give the viewport size. The `window.devicePixelRatio` gives the DPR. The `screen.colorDepth` gives the color depth in bits per pixel. The `screen.orientation` API (when available) gives orientation type and angle. The tool automatically detects these values on page load and sends them to the server for display in the detailed table and for history logging. The live resize monitor listens for the `resize` event and updates the displayed window width, height, and orientation when you resize the browser. The visual representation draws a proportional view of your screen and viewport so you can see how much of the screen is visible in the browser.
Knowing your screen resolution is useful for troubleshooting display issues, configuring software that asks for resolution, verifying monitor settings, designing responsive websites, and understanding how your device reports its capabilities to web applications. Developers use it to test breakpoints and media queries. QA testers use it to document the environment they tested in. Support staff use it when helping users diagnose display problems. The tool is free and requires no installation.
Common resolutions include 1920×1080 (Full HD), 2560×1440 (QHD), 3840×2160 (4K UHD), and 1366×768 (common laptop HD). Mobile devices often use 375×667, 414×896, or similar logical dimensions. The tool detects your resolution automatically and displays it in a clear format. You can compare your result with the common resolutions reference to see if you match a standard. The visual representation helps you understand the relationship between your full screen and the browser viewport, which is especially useful when learning about responsive design.
Who Benefits from This Tool
Web developers and designers benefit from What Is My Screen Resolution when designing responsive layouts, testing media queries, and debugging viewport issues. Knowing the exact viewport size helps when setting breakpoints for mobile, tablet, and desktop. The device pixel ratio affects image quality and sizing; knowing the DPR helps when serving retina images. The live resize monitor shows how the viewport changes as the user resizes the window, which is useful for testing fluid layouts. Front-end developers use the tool to verify that their CSS and JavaScript correctly detect the viewport and adapt the layout.
QA testers and quality assurance engineers use the tool to document the screen resolution and viewport of the environment they tested in. When reporting bugs, including the resolution in the report helps developers reproduce the issue. The tool provides a quick way to copy and paste resolution values into bug reports or test documentation. UX researchers use it when conducting usability studies across different devices to record the screen characteristics of each participant.
End users benefit when troubleshooting display problems. If a website looks wrong on their monitor, a support agent might ask for their screen resolution. The tool provides an easy way to find and share that information. Users configuring software or games that ask for resolution can use the tool to get the correct values. Users comparing monitors or devices can use it to verify the advertised resolution. The tool works on desktop, laptop, tablet, and smartphone, so it adapts to whatever device the user is on.
Key Features
Instant Auto-Detection
The tool detects your screen and viewport properties as soon as the page loads. No button click or form submission is required. The hero section shows your resolution in large text (e.g., 1920 × 1080 pixels), with badges for DPR, color depth, orientation, and device category. The quick info cards display screen size, viewport, pixel ratio, and aspect ratio. All values are read from the browser's Screen and Window APIs and displayed immediately.
Visual Representation
A proportional diagram shows your screen outline with the viewport area drawn inside it. The relative sizes of the screen and viewport are scaled so you can see how much of the screen is visible in the browser. The diagram includes a monitor stand for visual context. This helps users understand the difference between screen resolution and viewport size.
Complete Screen Details Table
A detailed table lists all detected properties: screen resolution, available screen, browser viewport, browser window, device pixel ratio, physical resolution, color depth, aspect ratio, orientation, orientation angle, touch support, max touch points, and device category. Each row has a copy button so you can copy the value to the clipboard. The table is responsive and scrolls horizontally on small screens.
Common Resolutions Reference
A reference section shows common screen resolutions such as Full HD (1920×1080), QHD (2560×1440), 4K UHD (3840×2160), HD (1366×768), and typical mobile resolutions. If your device matches one of these, the tool highlights it with a "YOU" badge. This helps users quickly identify their resolution category.
Live Resize Monitor
Three live-updating values show the current window width, window height, and orientation. As you resize the browser window, these values update in real time. This is useful for testing responsive designs and understanding how the viewport changes when the window is resized.
Copy to Clipboard
Each row in the detailed table has a copy button. Clicking it copies the value to the clipboard and shows a brief confirmation toast. No need to manually select and copy text.
Responsive and Dark/Light Mode
The tool layout adapts to mobile, tablet, and desktop screens. Cards stack on small screens and show in a grid on larger screens. The design uses theme-aware colors that work in both light and dark mode.
How to Use
- Open the What Is My Screen Resolution tool page. The tool automatically detects your screen and viewport properties as soon as the page loads.
- View the hero section at the top to see your resolution in large text (e.g., 1920 × 1080 pixels), along with DPR, color depth, orientation, and device category badges.
- Scroll down to see the quick info cards for screen size, viewport, pixel ratio, and aspect ratio.
- View the visual representation to see a proportional diagram of your screen and viewport.
- Scroll to the Complete Screen Details table to see all detected properties. Use the copy button next to any value to copy it to the clipboard.
- Check the Common Resolutions section to see if your resolution matches a known standard. If it does, the tool highlights it with a "YOU" badge.
- Use the Live Resize Monitor section to see how the window width, height, and orientation change as you resize your browser window. Resize the window to test.
Common Use Cases
- Finding your screen resolution for software configuration or support requests
- Testing responsive layouts and media queries at different viewport sizes
- Documenting the test environment when reporting bugs or writing QA reports
- Verifying monitor resolution and display settings
- Understanding the difference between screen resolution and browser viewport
- Checking device pixel ratio for retina or high-DPI display optimization
- Identifying device category (mobile, tablet, laptop, desktop) for analytics
- Copying resolution values for documentation or configuration
- Comparing screen and viewport sizes when troubleshooting layout issues
- Learning about your device's display capabilities
Tips and Best Practices
Use the live resize monitor when testing responsive designs. Resize the browser window gradually and watch how the viewport values change. This helps you understand breakpoints and how your layout behaves at different sizes. The viewport is what matters for web layout; the screen resolution is the total display size. On a multi-monitor setup, the tool reports the resolution of the display where the browser window is located.
When copying values for bug reports or documentation, use the copy button in the detailed table for accuracy. The screen resolution and viewport are the most commonly used values. For responsive design testing, consider testing in both portrait and landscape orientations on mobile; the tool detects orientation and updates when you rotate the device. For high-DPI displays, the device pixel ratio is important; a DPR of 2 means you may want to serve 2x or higher resolution images for crisp display.
On mobile devices, the screen resolution reported may be the logical resolution (in CSS pixels) rather than the physical resolution. Browsers often normalize for consistency. The viewport is typically the visible area minus the browser UI (address bar, etc.). On some mobile browsers, the viewport can change when the user scrolls (e.g., the address bar hides). The tool captures the initial viewport; for dynamic viewport changes, use the live resize monitor.
Limitations and Notes
The tool relies on browser APIs. The screen resolution and viewport are reported by the browser and may not always match the physical display if the user has scaled the display or zoomed the browser. On some systems, the browser may report logical pixels rather than physical pixels. The device pixel ratio can vary; some devices report 1 even on high-DPI displays for compatibility.
The screen.orientation API is not supported in all browsers. On unsupported browsers, the tool infers orientation from the aspect ratio (width greater than height means landscape). The physical resolution (screen width × DPR, screen height × DPR) is an estimate; the actual physical pixel count depends on the display hardware. The tool is not intended for precise color calibration or display profiling.
Privacy: the tool does not collect or transmit any personally identifiable information beyond the screen data. The server may log usage for analytics. The tool runs client-side JavaScript to read screen properties; no sensitive data is exposed.
FAQs
What is the difference between screen resolution and viewport?
Screen resolution is the total number of pixels on your display (e.g., 1920×1080). The viewport is the visible area inside the browser window—it excludes the address bar, bookmarks, and other browser chrome. On a 1920×1080 screen, the viewport might be 1920×969 or similar. For web design, the viewport is what matters because that is the space available for your content.
What is device pixel ratio (DPR)?
Device pixel ratio indicates how many physical pixels correspond to one CSS pixel. A DPR of 2 means each CSS pixel is rendered with 4 physical pixels (2×2). Retina and high-DPI displays often have DPR 2 or higher. Knowing the DPR helps when serving high-resolution images for crisp display on retina screens.
Why does my viewport show different values than my screen?
The viewport is the browser window's visible area. The address bar, bookmarks bar, and other browser UI take up space, so the viewport is smaller than the screen. When you maximize the window, the viewport is usually close to the screen size minus the browser chrome.
Does the tool work on mobile?
Yes. The tool works on desktop, laptop, tablet, and smartphone. On mobile, the screen resolution and viewport are the logical dimensions (in CSS pixels). The tool detects orientation and updates when you rotate the device. The device category (Mobile, Tablet, etc.) is inferred from the screen width and touch support.
What is aspect ratio?
Aspect ratio is the ratio of width to height, simplified (e.g., 16:9 for 1920×1080). Common aspect ratios are 16:9 (widescreen), 4:3 (traditional), 21:9 (ultrawide), and 18:9 or 19.5:9 (many smartphones).
Can I copy the values?
Yes. Each row in the Complete Screen Details table has a copy button. Click it to copy the value to your clipboard. A brief confirmation toast appears.
What is the live resize monitor?
The live resize monitor shows the current window width, window height, and orientation. These values update in real time as you resize the browser window. Use it to test responsive layouts and see how the viewport changes.
Why does my resolution show as different from my monitor?
If you have display scaling enabled (e.g., 125% or 150% on Windows), the browser may report logical pixels rather than physical pixels. The device pixel ratio can also affect how the browser reports dimensions. The tool shows what the browser reports; for the physical resolution, multiply the screen width and height by the DPR.
What is the difference between available screen and screen resolution?
Screen resolution is the total display size. Available screen is the area minus taskbars, docks, and other system UI. On some systems, the browser may report the available area rather than the full screen for window placement.
Does the tool work offline?
The tool runs in your browser and requires an internet connection to load the page. Once loaded, the detection logic runs client-side; the server is used to display the detailed table and save history. For offline use, you would need to save the page or use a similar offline tool.
What is color depth?
Color depth is the number of bits used to represent each pixel's color. A 24-bit color depth means each pixel can display 16.7 million colors. The tool displays 24-bit color for most modern displays. Some older displays or devices may report 16-bit or 32-bit. Higher color depth generally means smoother gradients and more accurate color representation.
What does device category mean?
The tool infers a device category (Mobile, Tablet, Laptop, Desktop, or Large Display) based on screen width and other factors. This helps you quickly identify the type of device you are using. The category is approximate; some devices may fall into overlapping ranges. Mobile typically means narrow screens (under 768px), tablet is medium (768–1024px), laptop and desktop are wider, and large display indicates very wide screens.
How accurate is the tool?
The tool reports exactly what your browser reports via the Screen and Window APIs. Accuracy depends on the browser and operating system. In most cases, the values match the actual display. On scaled displays or when using browser zoom, the reported values may reflect logical pixels. The tool is intended for quick reference and troubleshooting, not for precise hardware calibration.
Search
Advertisement
