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) { }
