Live viewport detection, PPI calculator, breakpoint checker, device comparison, and CSS snippets — plus a full database of phones, tablets, laptops, monitors, TVs, and cinema formats.
Detected live from this browser. Resize the window to watch it update.
Enter a resolution and diagonal screen size to get pixels-per-inch.
Type a width to see which breakpoint bucket it falls in, or use your live viewport.
Search or filter, then copy a resolution, pin a favorite, or add it to the comparison tool.
No devices match your search.
Pick any two devices from the database to compare resolution, PPI, and area.
Ready-to-copy media queries for the standard breakpoint set above.
Download the full resolution list for offline reference or your own docs.
Saved only on this device — never uploaded anywhere.
@media queries for the standard breakpoint set with one click.No. Screen resolution is the device's full display in pixels. The viewport is the smaller area inside the browser where a page actually renders, after browser chrome, OS scaling, and zoom are accounted for.
Most sites follow a mobile-first approach: design for small screens first, then progressively enhance the layout for tablets, laptops, and desktops using min-width media queries.
PPI is the diagonal resolution in pixels (the square root of width squared plus height squared) divided by the physical diagonal screen size in inches.
There's no single standard, but a common set is under 576px for small phones, 576-767px for large phones, 768-991px for tablets, 992-1199px for small laptops, and 1200px+ for desktops. Adjust based on where your own layout actually breaks.
No, once the page loads everything runs locally in your browser. The device database, calculators, and breakpoint checker all work offline.
Browser toolbars, the OS taskbar, display scaling, and multi-monitor DPI settings all reduce the usable viewport below the raw screen resolution reported by the operating system.
A CSS pixel is a fixed reference unit browsers use for layout. A device pixel is a physical pixel on the screen. The device pixel ratio (DPR) tells you how many device pixels make up one CSS pixel — commonly 2 or 3 on high-density phone screens.
They're dynamic, small, and large viewport height units. Unlike vh, dvh adjusts as mobile browser toolbars show or hide, svh always assumes the toolbar is visible, and lvh always assumes it's hidden — useful for avoiding the classic mobile 100vh overflow problem.
No. Viewport detection, calculations, comparisons, and exports all happen locally. Favorites and history are saved only in your browser's local storage.
All tools are free. If they've saved you time, consider supporting us.