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.

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
• Apple Developer iOS Interface Guidelines
• Stack Overflow: iPhone XR / XS / XS Max CSS media queries
• Stack Overflow: All iPhones
• Ultimate Guide to iPhone Resolutions