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)