What is My Screen Resolution?
Your Display Classification
Visual Size Representation
How Your Screen Compares
Resize your browser window to see the values update in real-time.
Detailed Display Information
CSS Media Query Breakpoints
These are the common CSS breakpoints your current viewport matches:
Understanding Screen Resolution
Your screen resolution refers to the number of pixels displayed on your screen, expressed as width × height (e.g., 1920×1080). Higher resolutions display more content but at a smaller size.
Screen Resolution vs. Viewport Size
While your screen resolution is fixed for your display, your viewport size changes based on:
- Browser window size (if not full screen)
- Browser UI elements like toolbars and sidebars
- Operating system UI elements like taskbars
Web developers use viewport dimensions rather than screen resolution to create responsive designs.
Device Pixel Ratio Explained
The device pixel ratio (DPR) indicates how many physical pixels represent one CSS pixel on your device. For example:
- Standard displays: 1.0 (1 physical pixel = 1 CSS pixel)
- Retina/HiDPI displays: 2.0 (4 physical pixels = 1 CSS pixel)
- Super high-resolution displays: 3.0 or higher
Higher DPR values mean sharper text and images, but require higher-resolution assets.
Common Screen Resolutions
| Name | Resolution | Typical Devices |
|---|---|---|
| HD / 720p | 1280×720 | Entry-level laptops, older tablets |
| Full HD / 1080p | 1920×1080 | Standard monitors, laptops, TVs |
| 1440p / QHD | 2560×1440 | Gaming monitors, high-end laptops |
| 4K / UHD | 3840×2160 | Premium monitors, TVs, high-end laptops |
| iPhone (newer models) | Various (e.g., 1170×2532) | iPhones with notches/Dynamic Island |
| iPad | Various (e.g., 2388×1668) | iPad Pro, iPad Air |
Why Screen Resolution Matters
Your screen resolution impacts:
- Productivity: Higher resolutions allow more content to be displayed simultaneously
- Gaming: Affects visual quality and performance
- Content Creation: Determines how much of your project you can see at once
- Web Browsing: Influences how websites appear on your screen
For Web Developers
When developing websites, remember that users access content on a wide variety of screen sizes and devices. Always create responsive designs that adapt to different viewport dimensions rather than targeting specific screen resolutions.