All media queries for iPhone 13 (Pro, Max, Mini) and older iPhones

Question

For iPhone 12 and 13

iPhone 13 mini

/* 2340x1080 pixels at 476ppi */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { }

This media query is used for: iPhone 13 mini, iPhone 12 mini, iPhone 11 Pro, iPhone Xs, and iPhone X

iPhone 13 and iPhone 13 Pro

/* 2532x1170 pixels at 460ppi */
@media only screen 
    and (device-width: 390px) 
    and (device-height: 844px) 
    and (-webkit-device-pixel-ratio: 3) { }

This media query is used for: iPhone 13, iPhone 12 and iPhone 12 Pro

iPhone 13 Pro Max

/* 2778x1284 pixels at 458ppi */
@media only screen 
    and (device-width: 428px) 
    and (device-height: 926px) 
    and (-webkit-device-pixel-ratio: 3) { }

This media query is used for: iPhone 13 Pro Max and iPhone 12 Pro Max

Older iPhones (X, Xs, XR and 11)

iPhone 11

/* 1792x828px at 326ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 2) { }

This media query is used for: iPhone 11 and iPhone XR

iPhone 11 Pro

/* 2436x1125px at 458ppi */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { }

This media query is used for: iPhone 13 mini, iPhone 12 mini, iPhone 11 Pro, iPhone Xs, and iPhone X

iPhone 11 Pro Max

/* 2688x1242px at 458ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 3) { }

This media query is used for: iPhone 11 Pro Max and iPhone Xs Max

Device orientation

Use the following code to add landscape or portrait orientation:

For portrait:

and (orientation: portrait)

For landscape:

and (orientation: landscape)