Screen Resolution Viewer
The Screen Resolution Viewer is a comprehensive browser-based diagnostic tool that reports your display and viewport metrics in real…
Your Screen Information
Display Properties
Screen Test
Select a test pattern above
Common Screen Resolutions
Browser Compatibility
Supported Properties:
- • screen.width/height: Full screen dimensions
- • window.innerWidth/Height: Viewport size
- • screen.colorDepth: Color depth in bits
- • devicePixelRatio: HiDPI scaling factor
Limitations:
- • Cannot detect multiple monitors
- • Limited to current browser window
- • May be affected by zoom levels
- • Mobile browsers may report differently
Responsive Design Breakpoints
Related tools
More from the same category
DNS Lookup
Look up DNS records for a domain (A, MX, TXT, and more).
HTML Table Generator
Generate an HTML table with rows and columns.
HTTP Headers Viewer
View HTTP response headers.
Internet Speed Test
Test your internet connection speed.
IP Address Lookup
Look up geolocation and info for an IP address.
Keyboard Test
Test which keyboard keys are working.
Learn more — open a section when you need details
The Screen Resolution Viewer is a comprehensive browser-based diagnostic tool that reports your display and viewport metrics in real time, displaying screen dimensions (physical display resolution), viewport dimensions (browser window size), color depth and pixel depth, device pixel ratio (DPR) for HiDPI displays, device orientation, touch support detection, and available width calculations. It includes responsive design breakpoint status indicators showing which CSS breakpoint ranges are currently active, and provides visual test patterns including grids for alignment verification, lines for anti-aliasing checks, color swatches for gamut validation, and text rendering samples to validate font rendering quality and anti-aliasing across different devices and browsers. The tool automatically detects and updates metrics when windows are resized or devices are rotated, providing live debugging information for responsive design development. This is especially useful when debugging responsive layouts, preparing design specifications, validating HiDPI asset requirements, documenting QA testing environments for reproducibility, or troubleshooting display and rendering issues across different devices, browsers, and screen configurations requiring comprehensive display metric analysis for responsive design and cross-device compatibility.
-
1
Open the Screen Resolution Viewer page in your browser to automatically detect and display current screen dimensions, viewport size, color depth, device pixel ratio (DPR), orientation, touch support status, and available width metrics in real time without requiring any input or configuration.
-
2
Resize your browser window, rotate your device (for mobile/tablet), or change zoom level, then click "Refresh" or "Update Metrics" button to capture and display updated resolution and viewport values, as resolution and viewport metrics change dynamically with window resizing, device rotation, or browser zoom adjustments.
-
3
Check the "Responsive Design Breakpoints" section to see which CSS breakpoint range is currently active (mobile, tablet, desktop, etc.), displaying which responsive design breakpoints would trigger based on current viewport width, enabling verification of responsive layout behavior and breakpoint activation during window resizing.
-
4
Use Test Pattern options to validate rendering quality: select "Grid" pattern for alignment verification and pixel-perfect layout checking, "Lines" pattern for anti-aliasing quality checks, "Colors" pattern for color gamut validation and display color accuracy testing, and "Text" pattern for font rendering quality assessment across different browsers and devices.
-
5
Click "Copy Info" or "Copy Metrics" button to copy a formatted summary of all detected metrics (screen resolution, viewport dimensions, DPR, orientation, breakpoints) to clipboard for pasting into bug reports, design handoff documentation, support tickets, or development notes requiring comprehensive device and browser metric information.
-
6
Compare resolution and viewport values across different devices, browsers, and screen configurations to verify CSS media query behavior, responsive layout activation, and image source selection (srcset, sizes) for responsive image delivery, ensuring proper responsive design implementation across target devices and browsers.
-
7
Document target resolution and orientation for specific installations, kiosks, or fixed-display setups by capturing and saving resolution metrics for deployment environments, enabling accurate documentation of display requirements, orientation settings, and viewport specifications for hardware setup and configuration documentation.
-
8
Test responsive layouts and breakpoint behavior by actively resizing browser windows while viewing breakpoint status indicators, verifying that CSS media queries activate correctly, responsive layouts adapt properly, and breakpoint transitions occur at expected viewport widths during responsive design debugging and validation workflows.
Responsive design breakpoint debugging and verification
Verify when tablet, desktop, or mobile breakpoints activate during browser window resizing, ensuring CSS media queries trigger at correct viewport widths, responsive layouts adapt properly, and breakpoint transitions occur as expected for responsive design validation and debugging across different screen sizes and devices.
HiDPI and Retina display validation
Confirm device pixel ratio (DPR) and asset crispness on Retina displays, 4K monitors, or high-density screens, ensuring images and graphics render at appropriate resolutions, verifying that 1x, 2x, and 3x image assets are delivered correctly, and validating that HiDPI assets appear crisp without blurriness on high-density displays.
Design QA and visual testing documentation
Share comprehensive viewport and resolution snapshots with screenshots for design review, client handoff, or QA documentation, providing complete device and browser context including resolution, DPR, orientation, and breakpoint status for accurate design review and visual quality assurance requiring detailed display environment information.
Kiosk and fixed-display setup documentation
Document target resolution, orientation, and display specifications for kiosk installations, fixed-display setups, or hardware deployments, enabling accurate hardware configuration documentation, display requirement specifications, and installation setup instructions for fixed-display environments requiring precise resolution and orientation documentation.
Accessibility and readability testing
Ensure readable text metrics at common font sizes and zoom levels across different screen resolutions, verifying that text remains legible, typography scales appropriately, and content remains accessible at various viewport sizes and zoom levels for comprehensive accessibility testing and readability validation across devices and display configurations.
Cross-browser and cross-device compatibility testing
Compare resolution and viewport metrics across different browsers (Chrome, Firefox, Safari, Edge) and devices (desktop, tablet, mobile) to verify consistent behavior, identify browser-specific differences, and ensure responsive designs work correctly across all target browsers and devices for comprehensive cross-platform compatibility validation.
Image optimization and responsive image delivery
Determine appropriate image sizes and srcset configurations by analyzing actual viewport dimensions and DPR values, enabling accurate responsive image optimization, appropriate image source selection, and optimal image delivery based on actual device capabilities and viewport requirements for efficient responsive image implementation.
Development environment setup and debugging
Document development and testing environments for team collaboration, reproducing display-related bugs, or setting up consistent testing environments, enabling accurate environment documentation and reproducible testing scenarios for debugging responsive design issues, display-related problems, or cross-device compatibility problems requiring detailed environment specifications.
Account for browser UI elements and scrollbars when interpreting viewport metrics, as viewport dimensions are typically smaller than screen dimensions due to browser chrome, address bars, scrollbars, and other browser UI elements reducing available viewport space, requiring understanding that viewport < screen size in most browser configurations.
Recheck metrics after zooming in or out, as browser zoom changes device pixel ratio (DPR) and viewport calculations, causing resolution and viewport values to update when zoom level changes, requiring metric refresh after zoom adjustments to ensure accurate current viewport and resolution values reflecting actual zoom state.
Use CSS media queries based on viewport width ranges, not User-Agent (UA) strings, as viewport-based media queries provide reliable, future-proof responsive design implementation, while UA detection is unreliable and doesn't account for window resizing, requiring viewport-width-based breakpoints for accurate responsive layout control.
Provide 1x, 2x, and 3x image assets for crisp visuals across different device pixel ratios (DPR), as high-DPR displays (Retina, 4K) require higher resolution images to appear crisp, requiring multiple image resolution variants (srcset) to ensure optimal image quality across all DPR values and display densities.
Test orientation change events on mobile and tablet devices for layout stability, as device rotation changes viewport dimensions and orientation, potentially triggering responsive layout changes, requiring orientation change testing to ensure layouts adapt correctly to portrait and landscape orientations without breaking or misaligning content.
Note that multi-monitor data is not exposed by browsers for privacy and security reasons, as browsers only report primary display metrics and cannot access information about multiple monitors, requiring understanding that resolution metrics reflect only the primary display or browser window, not extended desktop or multi-monitor configurations.
Collect both resolution and device pixel ratio (DPR) when reporting image blurriness or quality issues, as blurriness often results from mismatched image resolution and DPR, requiring both metrics to diagnose whether images are being displayed at incorrect resolutions or if DPR-aware image delivery is needed for optimal image quality.
Use test patterns (Grid, Lines, Colors, Text) to validate rendering quality across browsers and devices, as test patterns reveal anti-aliasing differences, color gamut variations, font rendering quality, and alignment issues that may not be apparent in normal content, enabling comprehensive visual quality validation and cross-browser rendering consistency testing.
Testing responsive designs only on desktop devices ignoring mobile DPR and viewport differences causing mobile compatibility issues, when responsive design testing is performed only on desktop without considering mobile device pixel ratios (DPR) and viewport sizes, causing mobile display problems, incorrect breakpoint behavior, or poor mobile user experience requiring testing across different device types including mobile with their unique DPR and viewport characteristics for comprehensive responsive design validation.
Relying on User-Agent (UA) strings for layout logic instead of viewport dimensions and CSS media queries causing incorrect responsive behavior, when responsive design uses UA detection instead of viewport-based CSS media queries, causing incorrect layout decisions, device misidentification, or unreliable responsive behavior requiring CSS media queries based on viewport width and device capabilities rather than UA strings for reliable, future-proof responsive design implementation.
Ignoring color depth and font rendering differences during quality assurance causing visual inconsistency, when QA testing doesn't account for color depth variations or font rendering differences across devices, causing visual inconsistencies, color accuracy issues, or typography problems going undetected requiring testing color depth, font rendering, and visual appearance across different devices and browsers for comprehensive visual QA coverage.
Confusing device pixels (physical pixels) with CSS pixels (logical pixels) in calculations causing scaling errors, when responsive design calculations mix device pixels and CSS pixels without accounting for device pixel ratio, causing incorrect sizing, scaling issues, or layout problems requiring understanding that CSS pixels are logical units (affected by DPR and zoom) while device pixels are physical display pixels, with proper conversion using device pixel ratio for accurate calculations.
Not documenting browser zoom level when reproducing visual bugs causing inconsistent bug reports, when visual bugs are reported without zoom level information, causing difficulty reproducing issues since zoom affects viewport, DPR, and CSS pixel calculations requiring documenting zoom level (100%, 150%, etc.) along with resolution and viewport information when reporting visual bugs or layout issues for accurate reproduction and debugging.
Assuming screen resolution equals viewport size causing layout miscalculations, when responsive design assumes screen resolution matches viewport dimensions, causing incorrect breakpoint behavior since viewport excludes browser UI, scrollbars, and browser chrome requiring using viewport dimensions (not screen resolution) for responsive design breakpoints and media queries since viewport reflects actual CSS layout area, not total screen size.
Not testing responsive breakpoints at actual breakpoint boundaries causing missed edge cases, when responsive breakpoints are tested at random sizes rather than exact breakpoint values (e.g., 768px, 1024px), causing missed edge cases, incorrect breakpoint behavior, or layout issues at critical breakpoint transitions requiring testing exactly at breakpoint boundaries and just above/below breakpoints to verify correct responsive behavior at transition points.
Ignoring device pixel ratio when serving images causing blurry or oversized images, when images are served without considering device pixel ratio, causing blurry images on high-DPR displays or unnecessarily large images on low-DPR displays requiring serving appropriate image resolutions based on DPR (1x, 2x, 3x assets) for crisp images across different display densities without wasting bandwidth.
Not accounting for orientation changes affecting viewport dimensions causing mobile layout issues, when responsive design doesn't handle orientation changes (portrait/landscape), causing layout problems, incorrect breakpoint activation, or poor user experience on mobile devices requiring testing both portrait and landscape orientations and ensuring responsive breakpoints work correctly in both orientations for mobile device compatibility.
Using screen resolution viewer data without understanding browser limitations causing incorrect assumptions, when resolution data is used assuming complete accuracy but browser privacy and security restrictions limit available information (multi-monitor detection, exact physical dimensions), causing incorrect assumptions requiring understanding browser API limitations and using resolution data within context of available browser information, not assuming complete system-level accuracy.
Not verifying responsive image srcset/sizes implementation matches DPR and viewport causing image serving issues, when responsive images are implemented without verifying srcset/sizes selection matches actual DPR and viewport dimensions, causing incorrect image serving, poor performance, or visual quality issues requiring testing responsive image selection against actual DPR and viewport to ensure correct image serving based on device characteristics.
Sharing resolution information without considering privacy implications causing potential fingerprinting concerns, when screen resolution and device information is shared widely without considering browser fingerprinting implications, causing privacy concerns or device tracking risks requiring careful consideration when sharing device information and using resolution data responsibly, understanding that detailed device information can be used for browser fingerprinting.
Viewport excludes browser UI elements (address bar, toolbars, scrollbars) and reflects the CSS layout area where your webpage content appears. Screen resolution is the total physical display size. Viewport is smaller than screen resolution because browser chrome consumes space. Use viewport dimensions (not screen resolution) for responsive design breakpoints since viewport represents the actual content area available for your webpage layout.
Device pixel ratio (DPR) is the ratio of physical pixels to CSS pixels. Higher DPR (2x, 3x) means denser displays where multiple physical pixels represent one CSS pixel. DPR affects: image sharpness (need 2x/3x images for high-DPR), CSS rendering precision, and visual quality. High-DPR displays (Retina, 4K) require higher-resolution assets for crisp rendering. DPR is essential for serving appropriate image assets and ensuring visual quality across different display densities.
Yes, zoom significantly affects CSS pixel metrics and effective DPR. Zooming in increases CSS pixel size (viewport appears smaller in CSS pixels) and reduces effective DPR. Zooming out decreases CSS pixel size and increases effective DPR. Always check zoom level (100% is default) when measuring viewport or diagnosing layout issues. Document zoom level when reporting bugs since zoom affects all viewport-based calculations and responsive breakpoints.
No, browsers don't expose multi-monitor information for privacy and security reasons. The tool only shows information about the primary display where the browser window is located. Multi-monitor detection is restricted by browser security policies to prevent browser fingerprinting and privacy concerns. The resolution viewer shows only the display where your browser window is currently located, not system-wide display information.
No, all detection happens entirely client-side in your browser. Resolution data, viewport information, and device characteristics are not transmitted to external servers. Use the "Copy Info" feature to manually share information when needed. Your device information remains completely private on your device. The tool works offline once loaded, with no data transmission to external systems for privacy protection.
Use the Text test pattern in the tool: compare font rendering at different sizes, weights, and styles. Test patterns help identify: font rendering differences, anti-aliasing quality, hinting variations, and readability across displays. Compare text patterns across different browsers, devices, and zoom levels to ensure consistent typography. Text patterns are useful for validating font choices and ensuring readable text across target devices and browsers.
Use the Colors test pattern to visually check color saturation, banding, and gamut coverage. Color patterns help identify: color accuracy issues, banding problems, gamut limitations, and display color quality. Compare color patterns across different displays to verify color consistency. While not a professional colorimeter, color patterns provide visual sanity checks for color rendering and help identify obvious color or gamut issues in displays.
Some browsers don't expose the Orientation API, require permissions, or have API limitations. Mobile browsers typically support orientation detection, but desktop browsers or some browser versions may not. Orientation detection depends on device capabilities and browser API support. If orientation is unknown, manually test portrait/landscape modes or use browser developer tools to verify orientation changes affect viewport dimensions correctly.
Check DPR and viewport dimensions shown by the tool, then verify which image from your srcset is actually being served. Compare expected image selection (based on DPR and viewport) with actual served image. Use browser developer tools to inspect loaded image sources. Ensure your srcset/sizes attributes correctly map to DPR and viewport combinations. The resolution viewer helps verify that responsive image selection logic matches actual device characteristics.
For automation, use WebDriver scripts (Selenium, Playwright) to capture window.innerWidth, window.innerHeight, window.devicePixelRatio, and take screenshots. Automation can programmatically test different viewport sizes, DPRs, and orientations. The resolution viewer tool is for manual testing and verification. For automated testing, use browser automation frameworks that can control viewport, simulate different devices, and capture resolution/viewport metrics programmatically for continuous testing workflows.
Verify your media query breakpoints match viewport dimensions (not screen resolution). Check for: browser zoom affecting viewport, browser UI consuming space, or incorrect breakpoint values. Use the resolution viewer to see exact viewport dimensions and compare with your CSS breakpoints. Adjust media queries to match actual viewport sizes. Remember viewport < screen resolution due to browser chrome, so breakpoints should use viewport dimensions, not screen resolution values.
Capture resolution/viewport data when issues occur: viewport dimensions, DPR, orientation, zoom level. Share this data with screenshots to help debug responsive issues. Compare data across devices to identify patterns. Use breakpoint testing to verify media queries activate correctly. Resolution data helps diagnose: incorrect breakpoint behavior, image serving issues, layout problems, or device-specific bugs. Document resolution context (device, browser, zoom) for accurate bug reproduction and responsive design debugging.