The most comprehensive device screen size reference for 2026, covering iPhones, Android phones, iPads/tablets, laptops, and desktop monitors. Each device lists physical resolution, screen size, PPI, CSS logical width, and scale factor (DPR) to help developers and designers pick the right breakpoints.

No matching devices found

iPhone Screen Sizes

The table below lists display specs for all current and recent iPhone models. CSS Width = Physical Width / Scale Factor.

Model	Screen	Resolution (px)	PPI	CSS Width	Scale
iPhone 16 Pro Max	6.9"	2868 × 1320	460	440	3x
iPhone 16 Pro	6.3"	2622 × 1206	460	402	3x
iPhone 16 Plus	6.7"	2796 × 1290	460	430	3x
iPhone 16	6.1"	2556 × 1179	460	393	3x
iPhone 15 Pro Max	6.7"	2796 × 1290	460	430	3x
iPhone 15 Pro	6.1"	2556 × 1179	460	393	3x
iPhone 15 Plus	6.7"	2778 × 1284	458	428	3x
iPhone 15	6.1"	2556 × 1179	460	393	3x
iPhone 14 Pro Max	6.7"	2796 × 1290	460	430	3x
iPhone 14 Pro	6.1"	2556 × 1179	460	393	3x
iPhone 14 Plus	6.7"	2778 × 1284	458	428	3x
iPhone 14	6.1"	2532 × 1170	460	390	3x
iPhone SE (3rd)	4.7"	1334 × 750	326	375	2x

Popular Android Screen Sizes

Android devices vary widely. Below are the most popular flagships and mid-range models by global market share.

Model	Screen	Resolution (px)	PPI	CSS Width	Scale
Samsung Galaxy S24 Ultra	6.8"	3120 × 1440	505	384	3.75x
Samsung Galaxy S24+	6.7"	3120 × 1440	513	384	3.75x
Samsung Galaxy S24	6.2"	2340 × 1080	416	360	3x
Samsung Galaxy A54	6.4"	2340 × 1080	403	360	3x
Samsung Galaxy A34	6.6"	2340 × 1080	390	360	3x
Google Pixel 8 Pro	6.7"	2992 × 1344	489	412	3.5x
Google Pixel 8	6.2"	2400 × 1080	428	412	2.625x
Google Pixel 8a	6.1"	2400 × 1080	431	412	2.625x
OnePlus 12	6.82"	3168 × 1440	510	412	3.5x
Xiaomi 14	6.36"	2670 × 1200	460	400	3x
Xiaomi 14 Pro	6.73"	3200 × 1440	522	412	3.5x
OPPO Find X7 Ultra	6.82"	3168 × 1440	510	412	3.5x
Huawei Pura 70 Pro	6.8"	2844 × 1260	460	420	3x

iPad & Tablet Screen Sizes

iPads use a consistent 2x scale factor. Samsung Galaxy Tab series is another popular tablet choice with varying DPR values.

Model	Screen	Resolution (px)	PPI	CSS Width	Scale
iPad Pro 13" (M4)	13"	2752 × 2064	264	1032	2x
iPad Pro 11" (M4)	11"	2420 × 1668	264	834	2x
iPad Air 13" (M3)	13"	2732 × 2048	264	1024	2x
iPad Air 11" (M3)	11"	2360 × 1640	264	820	2x
iPad mini (A17 Pro)	8.3"	2266 × 1488	326	744	2x
iPad (10th gen)	10.9"	2360 × 1640	264	820	2x
Samsung Galaxy Tab S9 Ultra	14.6"	2960 × 1848	240	--	varies
Samsung Galaxy Tab S9+	12.4"	2800 × 1752	266	--	varies
Samsung Galaxy Tab S9	11"	2560 × 1600	274	--	varies
Samsung Galaxy Tab A9	8.7"	1340 × 800	179	--	varies

Desktop & Laptop Screen Resolutions

Common desktop monitor resolution standards and Apple MacBook display specs.

Standard Monitor Resolutions

Name	Resolution (px)	Aspect Ratio	Common Sizes
4K / UHD	3840 × 2160	16:9	27"–32"
QHD / 2K	2560 × 1440	16:9	27"
WQXGA	2560 × 1600	16:10	27"
Full HD / 1080p	1920 × 1080	16:9	21"–27"
WXGA / HD	1366 × 768	~16:9	14"–15.6"
HD+	1600 × 900	16:9	15.6"
5K	5120 × 2880	16:9	27"
Ultrawide UWQHD	3440 × 1440	21:9	34"

Apple MacBook Series

Model	Screen	Resolution (px)	PPI	Scale
MacBook Pro 16" (M3/M4)	16.2"	3456 × 2234	254	2x
MacBook Pro 14" (M3/M4)	14.2"	3024 × 1964	254	2x
MacBook Air 15" (M3/M4)	15.3"	2880 × 1864	224	2x
MacBook Air 13" (M3/M4)	13.6"	2560 × 1664	224	2x

CSS Responsive Breakpoints

The following breakpoints are recommended by major frameworks and design systems in 2026. Breakpoints should be based on content, not specific devices, but these values are widely accepted starting points.

Category	Breakpoint Range	Target Devices
Extra Small (xs)	0 – 479px	Small phones (portrait)
Small (sm)	480 – 767px	Large phones (portrait)
Medium (md)	768 – 1023px	Tablets (portrait) / Large phones (landscape)
Large (lg)	1024 – 1439px	Tablets (landscape) / Laptops
Extra Large (xl)	1440 – 1919px	Desktop monitors
2X Large (2xl)	1920px+	Large desktops / 4K

CSS Media Query Examples

/* Mobile-first approach */
@media (min-width: 480px)  { /* sm  – large phones   */ }
@media (min-width: 768px)  { /* md  – tablets         */ }
@media (min-width: 1024px) { /* lg  – laptops         */ }
@media (min-width: 1440px) { /* xl  – desktops        */ }
@media (min-width: 1920px) { /* 2xl – large desktops  */ }

/* Tailwind CSS v3 defaults */
/* sm:640px  md:768px  lg:1024px  xl:1280px  2xl:1536px */

/* Bootstrap 5 defaults */
/* sm:576px  md:768px  lg:992px  xl:1200px  xxl:1400px */

High-DPI Media Queries

/* Target high-DPI (Retina) displays */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  .hero-bg {
    background-image: url('hero@2x.webp');
  }
}

/* Target 3x displays (most modern phones) */
@media (-webkit-min-device-pixel-ratio: 3),
       (min-resolution: 288dpi) {
  .hero-bg {
    background-image: url('hero@3x.webp');
  }
}

Viewport vs Physical Resolution

Physical Resolution (Hardware Pixels)

The actual number of physical pixels on the screen. For example, iPhone 16 Pro has a physical resolution of 2622 × 1206 pixels. This determines display sharpness — more pixels mean finer detail.

CSS Viewport Width (Logical Pixels)

The logical pixel width reported to CSS by the browser. iPhone 16 Pro has a CSS width of only 402px because it uses 3x scaling. Writing width: 100px in CSS actually occupies 300 physical pixels on a 3x display.

Why Does This Matter?

In responsive design, media queries like @media (max-width: 768px) match CSS pixels, not physical pixels. So a phone with 1440p physical resolution might have only 360px CSS width and still trigger mobile breakpoints.

DPR (Device Pixel Ratio) Explained

Device Pixel Ratio (DPR) is the ratio of physical pixels to CSS pixels. A DPR of 2 means each CSS pixel maps to a 2×2 = 4 physical pixel grid. Understanding DPR is critical for image optimization — serve 2x images for 2x screens to maintain sharpness.

DPR	Meaning	Example Devices	Image Recommendation
1x	1 CSS px = 1 physical px	Older desktop monitors, budget laptops	Standard 1x images
2x	1 CSS px = 4 physical px	MacBook Retina, iPad, some Android	Serve @2x images
3x	1 CSS px = 9 physical px	iPhone 8+, all modern iPhones	Serve @3x images
3.5x–4x	1 CSS px = 12–16 physical px	Pixel 8 Pro, Galaxy S24 Ultra	@3x usually sufficient

Using srcset for Different DPRs

<img
  src="photo-400w.webp"
  srcset="photo-400w.webp 1x,
          photo-800w.webp 2x,
          photo-1200w.webp 3x"
  alt="Example photo"
  width="400" height="300"
/>

/* Or use sizes for art direction */
<img
  srcset="photo-320.webp 320w,
          photo-640.webp 640w,
          photo-960.webp 960w,
          photo-1280.webp 1280w"
  sizes="(max-width: 480px) 100vw,
         (max-width: 1024px) 50vw,
         33vw"
  src="photo-640.webp"
  alt="Responsive photo"
/>

Responsive Design Best Practices

Mobile-First Approach — Write CSS for the smallest screen first, then use min-width media queries to progressively enhance. This ensures optimal performance on low-end devices.
Content-Based Breakpoints — Set breakpoints where your layout breaks, not for specific devices. Devices change constantly; content-based breakpoints are more sustainable.
Use Relative Units — Prefer rem, em, vw, % over fixed px to let layouts scale naturally across screen sizes.
Serve Responsive Images — Use srcset to provide multiple resolutions for different DPRs and viewport widths. Avoid loading 4K images on mobile devices.
Test on Real Devices — Browser DevTools device emulation is approximate. Touch interactions, performance, and font rendering need real-device testing.
Set the Viewport Meta Tag — Always include <meta name="viewport" content="width=device-width, initial-scale=1"> in your <head>. Without it, mobile browsers render at desktop width.

Frequently Asked Questions

What is the difference between CSS pixels and physical pixels?

Physical pixels are the actual light-emitting dots on the screen. CSS pixels are logical units used by browsers for layout. On high-DPI displays, one CSS pixel may map to a 2×2 or 3×3 grid of physical pixels. When writing responsive CSS, you always work with CSS pixels.

Why is an iPhone's CSS width only ~390px when its resolution exceeds 1170px?

Because iPhones use 3x scaling (DPR=3). Physical width 1179px / 3 = 393px CSS width. This keeps text and UI elements at readable sizes on small screens while leveraging high pixel density for sharp rendering.

Which breakpoints should I use for responsive design?

Common starting points are 480px, 768px, 1024px, and 1440px. However, the best practice is to set breakpoints where your content actually breaks. If using a framework (Tailwind, Bootstrap), follow its default breakpoints for consistency.

How can I detect a user's screen resolution?

In JavaScript, window.screen.width and window.screen.height return CSS pixel dimensions, while window.devicePixelRatio returns the DPR. Multiply them to get physical resolution. In CSS, use the min-resolution media query to detect DPI.

How many image resolutions should I provide?

2x images cover most scenarios (all Retina Macs and iPads). 3x images target iPhones and flagship Android phones. For performance, providing 1x and 2x is usually sufficient — the difference between 2x and 3x is barely noticeable on small phone screens.

Device Screen Sizes