iPhone XR / XS / XS Max CSS media queries

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

The above is correct, but designers need to target the true screen dimensions to avoid scaling, cropping etc. For example the default landscape screen size is actually 808px for an XR.

So this may be more appropriate: @media (max-width: 808px) {...

This will in fact override this query: @media (max-width: 896px) {...

The problem is Apples safe area insets. These can be overcome and get true 896px edge to edge width by adding the following;

Meta tag: viewport-fit=cover

CSS: body { padding: env(safe-area-inset, 0px); }

The 0px size padding can be changed, or left right top bottom variables added, or adapt for portrait/landscape. But most will already have sufficient padding in their design.

Reference: https://webkit.org/blog/7929/designing-websites-for-iphone-x/

Not tested on other devices but seems they are all adopting same.