Comprehensive Guide to CSS Media Queries for iPhone Devices: From iPhone 15 to Historical Models

Introduction and Background

With the diversification of mobile devices, CSS media queries have become a key technology for implementing responsive web design. As a widely used smartphone globally, iPhone's device characteristics—such as resolution, pixel density, and screen size—pose specific requirements for front-end development. Based on the latest technical resources, this article systematically compiles media query methods for the iPhone 15 series and historical models, aiming to assist developers in efficiently adapting to different devices.

Core Parameters for iPhone Media Queries

CSS media queries apply different style rules by detecting physical characteristics of devices. For iPhones, the main parameters include width, height, and device pixel ratio (-webkit-device-pixel-ratio). These correspond to the device's logical pixel dimensions, not the physical resolution. For example, the iPhone 15 Pro has a logical width of 393 pixels, height of 852 pixels, and a device pixel ratio of 3, meaning each logical pixel is rendered by 3 physical pixels for high-definition display.

Media Query Implementation for iPhone 15 Series

The iPhone 15 series includes standard, Plus, Pro, and Pro Max models, requiring media queries designed based on device groupings. For iPhone 15 and iPhone 15 Pro, use the following code:

@media only screen 
    and (width: 393px) 
    and (height: 852px) 
    and (-webkit-device-pixel-ratio: 3) { 
    /* Add targeted style rules */
}

This query is based on logical dimensions of 393×852 pixels and a pixel ratio of 3, applicable to iPhone 14 Pro, iPhone 15, and iPhone 15 Pro. Similarly, for iPhone 15 Plus and iPhone 15 Pro Max, the code adjusts to:

@media only screen 
    and (width: 430px) 
    and (height: 932px) 
    and (-webkit-device-pixel-ratio: 3) { }

This covers iPhone 14 Pro Max, iPhone 15 Plus, and iPhone 15 Pro Max devices.

Adapting Media Queries for Historical iPhone Models

To ensure compatibility with older devices, media queries must cover models from iPhone 11 to iPhone 14. For instance, the query for iPhone 14 (and iPhone 12, 12 Pro, 13, 13 Pro) is:

@media only screen 
    and (width: 390px) 
    and (height: 844px) 
    and (-webkit-device-pixel-ratio: 3) { }

For iPhone 14 Plus (and iPhone 12 Pro Max, 13 Pro Max), use:

@media only screen 
    and (width: 428px) 
    and (height: 926px) 
    and (-webkit-device-pixel-ratio: 3) { }

Smaller devices like iPhone 13 Mini (and iPhone X, Xs, 11 Pro, 12 Mini) have the query:

@media only screen 
    and (width: 375px) 
    and (height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { }

Whereas iPhone 11 (and iPhone XR) uses a lower pixel ratio:

@media only screen 
    and (width: 414px) 
    and (height: 896px) 
    and (-webkit-device-pixel-ratio: 2) { }

For earlier devices like the iPhone SE series, the adaptation code is:

@media only screen 
    and (width: 375px) 
    and (height: 667px) 
    and (-webkit-device-pixel-ratio: 2) { }

Device Orientation and Browser Compatibility Handling

Media queries can be combined with device orientation parameters to optimize experience in portrait and landscape modes. For example, add and (orientation: portrait) for portrait or and (orientation: landscape) for landscape. However, note that browsers like Safari and Chrome may reduce the visible area height, so in practice, it is advisable to remove the height attribute or use dynamic detection to avoid layout errors. For instance, in media queries, rely primarily on width and pixel ratio rather than fixed height.

Practical Recommendations and Common Issues

When implementing media queries, adopt a progressive enhancement strategy: define base styles first, then add device-specific optimizations via media queries. Avoid over-reliance on exact dimensions; instead, combine with flexible layouts (e.g., Flexbox or Grid) to improve compatibility. During testing, use browser developer tools to simulate different devices and note that iOS version differences may affect rendering. For example, newer iOS versions might adjust viewport behavior, requiring periodic updates to query parameters.

Conclusion

Through systematic media query design, developers can effectively adapt to the full range of iPhone devices, from the latest iPhone 15 to historical models. Key points include understanding the relationship between logical and physical pixels, rationally grouping devices to simplify code, and addressing browser-specific issues. As devices evolve, it is recommended to continuously refer to official documentation and community resources to stay updated with technological advancements.