Para iPhone 12 y 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) { }

Esta consulta de medios se usa para: iPhone 13 mini, iPhone 12 mini, iPhone 11 Pro, iPhone Xs y iPhone X

iPhone 13 y iPhone 13 Pro

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

Esta consulta de medios se usa para: iPhone 13, iPhone 12 y 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) { }

Esta consulta de medios se usa para: iPhone 13 Pro Max y iPhone 12 Pro Max

iPhones más antiguos (X, Xs, XR y 11)

iPhone 11

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

Esta consulta de medios se usa para: iPhone 11 y 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) { }

Esta consulta de medios se usa para: iPhone 13 mini, iPhone 12 mini, iPhone 11 Pro, iPhone Xs y 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) { }

Esta consulta de medios se usa para: iPhone 11 Pro Max y iPhone Xs Max

Orientación del dispositivo

Use el siguiente código para agregar orientación horizontal o vertical:

Para retrato:

 and (orientation: portrait)

Para el paisaje:

 and (orientation: landscape)