cristinafsanz
7/17/2019 - 4:06 PM

Iphone media queries

iPhone 5:

@media screen and (device-aspect-ratio: 40/71) {}

iPhone 6:

@media screen and (device-aspect-ratio: 375/667) {}

iPhone 6 Plus:

@media screen and (device-aspect-ratio: 16/9) {}

iPad:

@media screen and (device-aspect-ratio: 3/4) {}

https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

iphone 3

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }

iphone 4

@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }

iphone 5

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) { }

iphone 6, 6s, 7, 8

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }

iphone 6+, 6s+, 7+, 8+

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }

iphone X

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }

iphone XR

@media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) { }

iphone XS

@media only screen and (min-device-width : 375px) and (max-device-height : 812px) and (-webkit-device-pixel-ratio : 3) { }

iphone XS Max

@media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 3) { }