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

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


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) 


matomo