Combined CSS Media Query for iPhone X/Xs, iPhone Xs Max, iPhone XR.

main.css

/*
 * reference:
 * 1. ref: https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
 * 2. https://stackoverflow.com/questions/52321212/iphone-xr-xs-xs-max-css-media-queries
 * 3. https://stackoverflow.com/questions/46313640/iphone-x-8-8-plus-css-media-queries
 */

/*
 * iPhone X & iPhone XS
 * 2436px x 1125px at 458ppi
 */
 @media
 only screen
   and (device-width : 375px)
   and (device-height : 812px)
   and (-webkit-device-pixel-ratio : 3)
   and (orientation : portrait),
   
 /*
  * iPhone XR
  * 1792px x 828px at 326ppi
  */
 only screen
   and (device-width : 414px)
   and (device-height : 896px)
   and (-webkit-device-pixel-ratio : 2)
   and (orientation : portrait),
 
 /*
  * iPhone XS Max
  * 2688px x 1242px at 458ppi
  */
 only screen
   and (device-width : 414px)
   and (device-height : 896px)
   and (-webkit-device-pixel-ratio : 3)
   and (orientation : portrait) {

     /*
      * styles goes here...
      */ 
   
 }