iPhone XR
/* 1792x828px at 326ppi */
@media only screen
and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 2) { }
iPhone XS
/* 2436x1125px at 458ppi */
@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) { }
iPhone XS Max
/* 2688x1242px at 458ppi */
@media only screen
and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 3) { }
Looking for a specific orientation ?
Portrait
Add the following rule:
and (orientation : portrait)
Landscape
Add the following rule:
and (orientation : landscape)
References:
- https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
- https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions