49 devices · Smartphones, tablets, computers and smartwatches
Apple devices: CSS viewport, density, and screen resolution
Display characteristics of 49 referenced Apple devices, each with the width your media queries respond to, its pixel density, and panel resolution. 39 of these devices can be tested directly in your browser.
Apple Smartphones
11 distinct CSS widths cover the entire range: 320, 360, 375, 390, 393, 402, 414, 420, 428, 430 and 440 px. Several models share the same: validating one of them is enough to validate the others.
| Model | CSS Viewport | Density | Panel resolution | Diagonal | Year |
|---|---|---|---|---|---|
| Apple iPhone 17 | 402 × 874 | 3x | 1206 × 2622 | 6.3" | 2025 |
| Apple iPhone 17 PRO | 402 × 873 | 3x | 1206 × 2622 | 6.3" | 2025 |
| Apple iPhone 17 PRO MAX | 440 × 956 | 3x | 1320 × 2868 | 6.9" | 2025 |
| Apple iPhone Air | 420 × 912 | 3x | 1260 × 2736 | 6.5" | 2025 |
| Apple iPhone 16 | 393 × 852 | 3x | 1179 × 2556 | 6.1" | 2024 |
| Apple iPhone 16 Plus | 430 × 932 | 3x | 1290 × 2796 | 6.7" | 2024 |
| Apple iPhone 16 PRO MAX | 440 × 956 | 3x | 1320 × 2868 | 6.7" | 2024 |
| Apple iPhone 15 | 393 × 852 | 3x | 1179 × 2556 | 6.1" | 2023 |
| Apple iPhone 15 Plus | 430 × 932 | 3x | 1290 × 2796 | 6.7" | 2023 |
| Apple iPhone 15 PRO | 393 × 852 | 3x | 1179 × 2556 | 6.1" | 2023 |
| Apple iPhone 15 PRO MAX | 430 × 932 | 3x | 1290 × 2796 | 6.7" | 2023 |
| Apple iPhone 14 | 390 × 844 | 3x | 1170 × 2532 | 6.1" | 2022 |
| Apple iPhone 14 Plus | 428 × 926 | 3x | 1284 × 2778 | 6.7" | 2022 |
| Apple iPhone 14 PRO | 390 × 844 | 3x | 1179 × 2556 | 6.1" | 2022 |
| Apple iPhone 14 PRO MAX | 428 × 928 | 3x | 1290 × 2796 | 6.7" | 2022 |
| Apple iPhone 13 | 390 × 844 | 3x | 1170 × 2532 | 6.1" | 2021 |
| Apple iPhone 13 Mini | 375 × 812 | 3x | 1080 × 2340 | 5.4" | 2021 |
| Apple iPhone 13 PRO | 390 × 844 | 3x | 1170 × 2532 | 6.1" | 2021 |
| Apple iPhone 13 PRO MAX | 428 × 926 | 3x | 1284 × 2778 | 6.7" | 2021 |
| Apple iPhone 12 | 390 × 844 | 3x | 1170 × 2532 | 6.1" | 2020 |
| Apple iPhone 12 Mini | 360 × 780 | 3x | 1080 × 2340 | 5.4" | 2020 |
| Apple iPhone 12 Pro | 390 × 844 | 3x | 1170 × 2532 | 6.1" | 2020 |
| Apple iPhone 12 Pro Max | 428 × 926 | 3x | 1284 × 2778 | 6.7" | 2020 |
| Apple iPhone SE | 375 × 667 | 2x | 750 × 1334 | 4.7" | 2020 |
| Apple iPhone 11 | 414 × 896 | 2x | 828 × 1792 | 6.1" | 2019 |
| Apple iPhone 11 Pro | 375 × 812 | 3x | 1125 × 2436 | 5.8" | 2019 |
| Apple iPhone 11 Pro Max | 414 × 896 | 3x | 1242 × 2688 | 6.5" | 2019 |
| Apple iPhone SE | 320 × 568 | 2x | 640 × 1136 | 4" | 2018 |
| Apple iPhone X | 375 × 812 | 3x | 1125 × 2436 | 5.8" | 2018 |
| Apple iPhone XR | 414 × 896 | 2x | 828 × 1792 | 6.1" | 2018 |
| Apple iPhone XS Max | 414 × 896 | 3x | 1242 × 2688 | 6.5" | 2018 |
| Apple iPhone 8 | 375 × 667 | 2x | 750 × 1334 | 4.7" | 2017 |
| Apple iPhone 8 Plus | 414 × 736 | 3x | 1080 × 1920 | 5.5" | 2017 |
| Apple iPhone 7 | 375 × 667 | 2x | 750 × 1334 | 4.7" | 2016 |
| Apple iPhone 7 Plus | 414 × 736 | 3x | 1080 × 1920 | 5.5" | 2016 |
| Apple iPhone 6s | 375 × 667 | 2x | 750 × 1334 | 4.7" | 2015 |
| Apple iPhone 6s Plus | 414 × 736 | 3x | 1080 × 1920 | 5.5" | 2015 |
| Apple iPhone 6 | 375 × 667 | 2x | 750 × 1334 | 4.7" | 2014 |
| Apple iPhone 5c | 320 × 568 | 2x | 640 × 1136 | 4" | 2013 |
| Apple iPhone 5s | 320 × 568 | 2x | 640 × 1136 | 4" | 2013 |
| Apple iPhone 5 | 320 × 568 | 2x | 640 × 1136 | 4" | 2012 |
Apple Computers
The given width is that of the browser window at the system's default scaling, not the panel resolution: it's this first value that your media queries see.
| Model | CSS Viewport | Density | Panel resolution | Diagonal | Year |
|---|---|---|---|---|---|
| Macbook Neo 2026 | 1204 × 753 | 2x | 2408 × 1506 | — | 2026 |
| Apple Macbook PRO 16" | 1728 × 1117 | 2x | 3456 × 2234 | 16.2" | 2021 |
| iMac 24" | 2048 × 1152 | 2x | 4096 × 2304 | 9.3" | 2021 |
| Apple MacBook Air 2020 13" | 1280 × 800 | 2x | 2560 × 1600 | 13.3" | 2020 |
Apple Tablets
Values are given in portrait. In landscape, width and height are reversed: Apple iPad Mini (6th Gen) goes from 768 x 1024 to 1024 x 768 CSS pixels. Your tablet breakpoints should cover both.
| Model | CSS viewport (portrait) | Density | Panel resolution | Diagonal | Year |
|---|---|---|---|---|---|
| Apple iPad Mini (6th Gen) | 768 × 1024 | 2x | 1536 × 2048 | 7.9" | 2021 |
| Apple iPad Air 4 | 820 × 1180 | 2x | 1640 × 2360 | 9.7" | 2020 |
| Apple iPad PRO 11" (3rd Gen) | 834 × 1194 | 2x | 1668 × 2388 | 11" | 2018 |
Apple Smartwatches
The browser on these watches displays only one column: width is the only measurement that matters, and it is narrower than any phone in the range.
| Model | CSS Viewport | Density | Panel resolution | Diagonal | Year |
|---|---|---|---|---|---|
| Apple Watch Series 6 (40mm) | 162 × 197 | 2x | 324 × 394 | 1.6" | 2020 |
Which widths to test first
The most represented widths in the range are 320, 375, 390 and 414 px. Checking them first covers 25 of the 49 referenced Apple models, and these should be your first breakpoints.
Go down to 162 px to cover the entire range, including Apple Watch Series 6 (40mm): a layout that fits this width fits everywhere. On the tablet side, also consider landscape values, where width and height are reversed.
Watch out for height: mobile browsers reduce the visible area with their interface bars, and these retract when scrolling. A height of 100vh therefore overflows the first screen; svh and dvh units are preferable.
Test your site on 39 Apple devices, without buying a single one
The tables provide measurements. The extension displays your site at the model's exact viewport, with its density, User-Agent, and portrait or landscape switching.
- 39 Apple devices ready to use, from older models to this year's releases
- Screenshots and videos exported in the device's format
- Works on your local environments and pre-productions
Free · 4.9/5 on 5,100 reviews
1,500,000+ users
Other brands
Frequently asked questions
What is the most common CSS viewport for Apple?
375 x 812 px, shared by 8 of the 49 referenced models, including Apple iPhone 13 Mini and Apple iPhone SE. This is the width to check first in this range.
What minimum width to test to cover Apple devices?
162 px, the width of the narrowest model in the list, Apple Watch Series 6 (40mm). If your layout fits at 162 px, it fits on the 49 Apple devices listed, up to the widest which reaches 2048 px.
Why does the resolution announced by Apple not match the CSS viewport?
Because these screens display multiple physical pixels per CSS pixel. Apple iPhone 17 has a panel of 1206 x 2622 pixels and a CSS viewport of 402 x 874 px, with a density of 3. It's the second value that should be written in a media query.
Do Apple tablets have the same viewport in portrait and landscape?
The values are reversed: Apple iPad Mini (6th Gen) displays 768 x 1024 px in portrait and 1024 x 768 px in landscape. The tables provide values in portrait, and the simulator allows switching between orientations.
How to test your site on a Apple device without having one?
With the Mobile FIRST extension: it replicates the viewport, pixel density, User-Agent, and touch events of 39 of these models, directly in your browser, including on a localhost address.
The mentioned brands and models belong to their respective owners.