Device Screen Size Database: Screen Sizes & Screen Resolutions

The Device Screen Size Database gives you the resolution, diagonal size, PPI, and aspect ratio for dozens of real phones, tablets, laptops, and monitors in one searchable table. Type a device name into Search devices, or narrow the list with the Filter by device type dropdown, and you'll get exact width and height in pixels alongside the physical screen diagonal so you can compare devices side by side without hunting through spec sheets.

Building a layout that holds up on a 4.7-inch phone and a 27-inch monitor starts with knowing the numbers. This device screen size database lets you search any model, filter by brand, or sort by any column for a quick screen size comparison, so you get the viewport width, pixel ratio and aspect ratio developers and designers actually code against. Every row covers mobile devices, tablets and desktop displays, with the resolution in both hardware and layout units.

How to Read the Device Screen Size Database

Each row in the device database is a set of display specifications taken from the manufacturer: the diagonal in inches, the native resolution, the total pixels, the color depth and the CSS size your code sees. The screen dimensions describe the display hardware; the CSS columns describe what a browser reports through screen.width. The table is plain HTML, so once the page loads the display specs stay available offline for quick lookups, and you can compare devices from different brands side by side. Use the screen resolution simulator tool to see concrete figures before you rely on a single spec sheet.

Physical Resolution vs Logical Resolution

The physical resolution is the count of hardware pixels on the panel. The logical resolution is the coordinate space the operating system lays out in: points on iOS, dp on Android and CSS pixels in a browser. The device pixel ratio (DPR) links the two:

$$\text{logical width} = \frac{\text{physical width}}{\text{DPR}}$$

A Samsung Galaxy S24 has a 1080 × 2340 panel and a ratio of 3, so \(1080 \div 3 = 360\) and \(2340 \div 3 = 780\): its layout size is 360 × 780 dp. Apple's Retina and Super Retina screens work the same way at 2× and 3×. One device-independent pixel always covers the same visual size, which is why a media query written for 360 px fits that phone regardless of how dense its panel is.

Pixel Density and the Scale Factor

Pixel density is measured in PPI (pixels per inch) and comes straight from the resolution and the diagonal:

$$\text{PPI} = \frac{\sqrt{w^{2} + h^{2}}}{d}$$

For a 27-inch QHD monitor at 2560 × 1440, \(\sqrt{2560^{2} + 1440^{2}} = 2937.2\), and \(2937.2 \div 27 = 108.8\) PPI. A modern OLED phone sits near 400-460 PPI, roughly four times denser. The scale factor (@2x, @3x on Apple devices) is the rounded step the OS uses to map that density onto layout units, so a higher pixel density doesn't make your layout bigger, only sharper. Two devices with the same screen resolution can still differ in sharpness when their diagonals differ.

Device Sizes for Tablets, Laptops and Monitors

Device sizes beyond the phone spread out much more. Tablet screens sit between mobile and desktop devices, laptops cluster around a handful of panels, and monitors range from budget 22-inch screens to wide gaming displays.

Tablet Resolutions in Portrait and Landscape

Classic tablet resolutions such as 768×1024 come from the original 4:3 iPad, and many web layouts still use 768 as a breakpoint. A current 10.9-inch iPad reports 820 × 1180 in portrait and 1180 × 820 in landscape, so check both widths in testing whenever the orientation changes.

Desktop Resolutions from Full HD to 4K

Desktop resolutions are more standardized than phones:

Full HD (1920 × 1080) is still the default for office monitors, QHD (2560 × 1440) is the step up for 27-inch screens, and 4K panels usually run at 150-200% scaling, so they report a smaller CSS width than their native resolution.

Viewport Sizes, Width Classes and Breakpoints

For responsive design, the viewport matters more than the panel. Android's published window width classes group density-independent widths into compact (under 600), medium (600-839) and expanded (840 and up), all in dp. Those classes make sensible breakpoints for web design too:

• Under 600: single-column layout, mobile-first navigation.
• 600-839: two columns, larger touch targets for UX on small tablets and open foldables.
• 840 and up: sidebars and multi-column UI.

Build responsive pages with fluid layouts, Flexbox and CSS Grid so the layout stretches between breakpoints instead of jumping at exact pixel values. Any viewport size in the table should land cleanly in one of these bands.

Screen Width Matters More Than Screen Heights

Screen width decides how many columns fit, so it drives your layout. Screen heights vary more, even on one phone, because browser toolbars appear and disappear as you scroll. Design for width first and use dvh units where height really matters.

Turning Device Specs into Image Assets

The ratio column of the device specs tells you how many image assets to export for high-density devices. On iOS, a 28 pt icon needs 56 px at @2x and 84 px at @3x. Use the database as a screen size reference here: check the ratio column for each target device to see which 2× and 3× exports you need, instead of guessing from a screen size map of CSS widths alone.

Android Density Buckets from mdpi to xxxhdpi

Google sorts screens into density buckets, and the ratio column tells you which one a phone uses: the S24 at 3 is xxhdpi, and the Pixel 8 at 2.625 also loads those 3× files, scaled down. For a 48 dp icon:

Ship the 4× file at minimum, or use SVG vectors, so even the densest devices in the screen sizes database get a sharp icon.