Screen Resolutions of All iPhone, iPad, and iPod touch Models — Complete 2026 Reference Table

When developing responsive websites, mobile interfaces, and applications, it is important to consider the screen resolutions of Apple devices. However, knowing the physical display resolution alone is not enough for proper responsive web design. Developers also need to understand the difference between physical pixels and logical screen coordinates.

We have compiled a comprehensive reference containing the screen resolutions of all iPhone, iPad, and iPod touch generations, from the earliest models to devices released in 2026.

The tables include release year, logical and physical resolution, aspect ratio, screen diagonal, and pixel density (PPI). This information will be useful for web designers, frontend developers, responsive layout specialists, and iOS and iPadOS application developers.

Last updated: October 14, 2026.

Logical vs. Physical Screen Resolution: What's the Difference?

Before examining the tables, let's review the main characteristics of Apple displays.

• Logical resolution — the screen dimensions measured in logical points. Under standard mobile web development conditions, these values are closely related to CSS pixels.
• Physical resolution — the actual number of hardware pixels in the display panel.
• Aspect ratio — the ratio between screen width and height. The tables use portrait orientation.
• Screen diagonal — the display size measured in inches.
• PPI (Pixels Per Inch) — the number of physical pixels per inch of the display.
• Device Pixel Ratio (DPR) — the scaling factor between logical and physical pixels. It does not always correspond directly to the ratio of hardware resolution to logical resolution.

For example, the iPhone 17 has a logical resolution of 402 × 874 and a physical resolution of 1206 × 2622 pixels. In this case, one logical pixel corresponds to three physical pixels along each axis.

However, this relationship does not apply to every model. Some devices, such as the iPhone 6 Plus, use additional image scaling.

Screen Resolutions of All iPhone Models — 2007–2026

The following table includes Apple smartphones from the original iPhone released in 2007 to the iPhone 18 Pro, iPhone 18 Pro Max, and foldable iPhone Duo introduced in September 2026.

Screen dimensions are provided for standard display settings, primarily in portrait orientation. For the iPhone Duo, specifications for both displays are listed separately.

Note: Logical screen dimensions are provided for typical interface settings. Depending on the iOS version, display scaling settings, and browser, the actual viewport may differ. For the iPhone Duo, logical dimensions are calculated from physical resolutions using a 3× scaling factor. The actual available Safari viewport may be smaller.

What's New in the 2026 iPhone Lineup?

In 2026, Apple introduced several devices featuring different display formats.

iPhone 18 Pro and iPhone 18 Pro Max

These models retain 6.3-inch and 6.9-inch displays, respectively. The iPhone 18 Pro has a physical resolution of 1206 × 2622 pixels, while the iPhone 18 Pro Max offers 1320 × 2868 pixels.

For developers, this means the familiar logical screen dimensions of 402 × 874 and 440 × 956 points remain unchanged from the previous Pro generation.

iPhone Duo

The foldable iPhone Duo features two OLED displays:

• 7.6-inch inner display — 1878 × 2670 physical pixels.
• 5.4-inch outer display — 1398 × 2034 physical pixels.

The main feature of this device is its ability to change the available interface area when folded or unfolded. Therefore, when developing responsive websites, it is particularly important to use flexible layouts and test how interfaces behave when the viewport dimensions change.

iPhone 17e

Introduced in 2026, the iPhone 17e features a 6.1-inch display with a resolution of 1170 × 2532 pixels and a pixel density of 460 PPI. Its logical screen dimensions correspond to the group of devices with a resolution of 390 × 844 points.

Screen Resolutions of All iPad Models — 2010–2026

iPad displays differ from iPhone screens not only in size but also in their aspect ratios. Traditional iPad models used a 3:4 portrait aspect ratio for many years, while newer iPad mini, iPad Air, and 11-inch iPad Pro models feature different proportions.

The following table includes screen resolutions for all major generations of iPad, iPad mini, iPad Air, and iPad Pro.

Display Characteristics of Modern iPad Models

Unlike smartphones, most Apple tablets are designed for active use in both portrait and landscape orientations.

Modern iPad models can be divided into several groups based on their logical screen dimensions:

• 744 × 1133 — compact iPad mini models with 8.3-inch displays.
• 820 × 1180 — recent standard iPad models and 11-inch iPad Air models.
• 834 × 1210 — 11-inch iPad Pro models powered by M4 and M5 chips.
• 1024 × 1366 — large 13-inch iPad Air models and earlier 12.9-inch iPad Pro generations.
• 1032 × 1376 — modern iPad Pro models with 13-inch displays.

Responsive web development must also account for iPadOS multitasking features. The dimensions of an individual application window can be significantly smaller than the tablet's full logical screen resolution.

Screen Resolutions of All iPod touch Models

The iPod touch lineup was produced from 2007 to 2019 and featured an interface similar to that of the iPhone. The final model was the 7th-generation iPod touch. Apple discontinued the iPod touch product line in 2022.

The following table includes all seven generations of iPod touch. Other iPod families, such as the iPod classic, nano, and shuffle, are not included because they are not devices with Safari and a standard iOS interface.

How to Check Your iPhone or iPad Screen Resolution

When developing websites, it is not always necessary to identify the exact device model. In many cases, determining the actual screen or browser viewport dimensions is more useful.

For example, JavaScript can display screen dimensions and the device pixel ratio:

console.log({
    screenWidth: window.screen.width,
    screenHeight: window.screen.height,
    viewportWidth: window.innerWidth,
    viewportHeight: window.innerHeight,
    devicePixelRatio: window.devicePixelRatio
});

Here, screen.width and screen.height describe the screen dimensions in CSS pixels, while window.innerWidth and window.innerHeight help determine the current browser viewport size.

The devicePixelRatio property indicates the scaling factor, which can be useful when working with graphics and the HTML Canvas API.

Screen resolution alone should not be used to identify an exact device model. Different iPhone and iPad models may share identical screen dimensions, and user-defined scaling settings may change the available logical area.

Which Screen Resolutions Should Be Considered in Responsive Web Design?

When creating a responsive website, developers should primarily consider the available width in CSS pixels rather than the physical resolution of the display.

For example, the following viewport widths can be used as reference points when testing responsive interfaces:

• 320 px — older compact iPhone models and iPod touch devices.
• 360–393 px — common mobile screen widths.
• 402–440 px — modern iPhone models with larger displays.
• 466–626 px — reference dimensions for iPhone Duo displays, excluding potential viewport restrictions.
• 768–834 px — many iPad models and compact tablet interfaces.
• 1024–1032 px — large iPad models in portrait orientation.

However, these values should be treated as testing references rather than mandatory CSS breakpoints.

When developing responsive layouts, it is generally preferable to choose breakpoints based on the content and the point at which the current layout no longer fits the available space.

Example CSS for a Responsive Interface

/* Base mobile styles */
.page-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}

/* Tablets */
@media (min-width: 768px) {
    .page-container {
        padding: 24px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .page-container {
        padding: 32px;
    }
}

This example demonstrates a general approach to responsive web design. Specific breakpoints should be selected based on the layout, element widths, and content structure of your website.

Why Physical Screen Resolution Is Not the Same as Browser Viewport Size

A common mistake in mobile interface design is using the physical display resolution as the layout width.

For example, an iPhone with a physical resolution of 1170 × 2532 pixels does not require a website designed for a width of 1170 CSS pixels.

With a standard scaling factor of 3, the logical width of such a device is 390 points.

To ensure correct rendering of responsive pages, developers should also include the viewport meta tag:

<meta name="viewport"
      content="width=device-width, initial-scale=1">

In modern 1C-Bitrix website templates, this meta tag is typically placed inside the head section.

Developers should also consider iOS system interface areas, screen cutouts, Dynamic Island, and safe areas. Their dimensions should not be calculated solely from the physical screen resolution.

Data Sources and Table Updates

This reference is based on Apple device specifications and developer documentation.

• Apple Developer — Layout
• Apple — iPhone 18 Pro and iPhone 18 Pro Max
• Apple — iPhone Duo
• Apple — iPhone 17e
• Apple — Compare iPad Models
• Apple Support — Device Technical Specifications

Important: Physical display resolutions are hardware specifications, while logical screen dimensions depend on software rendering. For certain models, particularly devices with additional display scaling and foldable screens, the actual browser viewport may differ from the nominal values listed in the tables.

Conclusion

Over the years, Apple mobile device screen resolutions have changed significantly, from 320 × 480 pixels on the original iPhone to the high-resolution displays of modern iPhone Pro models and the foldable iPhone Duo.

For web developers, however, logical screen dimensions remain the most important measurements because they help determine how much space is available for interface elements.

These comprehensive iPhone, iPad, and iPod touch screen resolution tables provide a convenient way to compare different device generations, choose appropriate dimensions for responsive layouts, and test website compatibility.

This reference has been updated for October 2026. As Apple introduces new devices and changes display scaling behavior, the information should be reviewed and updated accordingly.