---
title: "iPhone Screen Sizes and Media Queries "
url: "https://michalak.world/posts/iphone-screen-sizes-and-media-queries/"
description: "When styling mobile-friendly pages I have run into issues between the different iPhone X versions.  Also included: iPhone 7 and 8."
summary: "When styling mobile-friendly pages I have run into issues between the different iPhone X versions.  Also included: iPhone 7 and 8."
date: 2019-09-29
lastmod: 2026-08-19
tags: ["Drupal","Drupal 7","Drupal 8","Drupal Development"]
section: "posts"
author: "Michael Michalak"
site: "https://michalak.world/"
---

# iPhone Screen Sizes and Media Queries 

When styling mobile-friendly pages I have run into issues between the different iPhone X versions.  Also included: iPhone 7 and 8.

When styling mobile-friendly pages I have run into issues between the different iPhone X versions.  Also included: iPhone 7 and 8.

## iPhone XR
```
/* 1792x828px at 326ppi */ 
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 2) { } 
```
## iPhone X
```
/* 2436x1125px at 458ppi */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { }
```
## iPhone Xs
```
/* 2688x1242px at 458ppi */
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3) { }
```
## iPhone 7+/8+
``` 
/* iphone 6+, 6s+, 7+, 8+ */
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-height: 736px) 
    and (-webkit-device-pixel-ratio: 3) { }
```
## iPhone 7/8
```
/* iphone 6, 6s, 7, 8 */
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-height: 667px)  
    and (-webkit-device-pixel-ratio: 2) { }
```

## Resources:
- [Apple - Developer Archive](https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html)
- [Apple Developer iOS Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout)
- [Stack Overflow: iPhone XR / XS / XS Max CSS media queries](https://stackoverflow.com/questions/52321212/iphone-xr-xs-xs-max-css-media-queries)
- [Stack Overflow: All iPhones](https://stackoverflow.com/questions/46313640/iphone-x-8-8-plus-css-media-queries#46313641)
- [Ultimate Guide to iPhone Resolutions](https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions)