Physical Resolution · Viewport Size · DPI · CSS Breakpoints
Screen Resolution & Viewport Tester
Instantly verify screen width, inner browser window dimensions, pixel ratio, and active media query breakpoints for web design and testing.
Physical Screen
1920 × 1080
pixels
Browser Viewport
1280 × 720
CSS pixels
Device Pixel Ratio
1x
Standard DPI
Active Breakpoint
xl
Extra Large / xl (>=1280px)
Tailwind CSS Responsive Range Indicator
<sm
<640px
sm
640px
md
768px
lg
1024px
xl
1280px
2xl
1536px
Color Depth: 24-bit
Orientation: landscape primary
Rendered Pixels: 1280 × 720 px
Understanding Resolution vs. Viewport in Web Design
Physical Pixels vs. CSS Pixels
Modern high-density displays (such as Apple Retina or 4K monitors) pack 2 or 3 hardware dots into each CSS layout pixel. For instance, an iPhone with 1170 × 2532 physical pixels reports a CSS viewport of 390 × 844 at a device pixel ratio of 3x.
Common Responsive Breakpoints
Front-end frameworks structure responsive styles using width thresholds: Mobile (<640px), Tablet (768px), Desktop (1024px), and Wide displays (>=1280px).