iPhone XR / XS / XS Max CSS media queries

Question

What are the correct CSS media queries used to target Apple\'s 2018 devices: iPhone XR/XS/XS Max ?

Answer 1

The info from Nathan is great. Thanks for the breakpoints which every browser's inspector doesn't seem to have. Only challenge I ran into was that all of my previous media queries use things like

/* Landscape */
@media only screen 
    and (min-device-width : 414px) 
    and (max-device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3)
    and (orientation : landscape) { 

whereas the solution above uses only

and (device-width : 414px)

which can cause issues with queries you may already have that use both min-device and max-device.

Thanks very much for these sizes and DPRs!