Advertisements
Below are some quick code snippets you can use in your CSS file to accommodate for iPad and iPhone devices.
iPad
iPad (portrait)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* YOUR CSS GOES HERE */
}iPad (landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* YOUR CSS GOES HERE */
}iPad (portrait & landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* YOUR CSS GOES HERE */
}iPhone X
iPhone X (portrait)
@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait) {
/* YOUR CSS GOES HERE */
}iPhone X (landscape)
@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape) {
/* YOUR CSS GOES HERE */
}iPhone X (portrait & landscape)
@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) {
/* YOUR CSS GOES HERE */
}iPhone 6, 7, & 8
iPhone 6, 7, & 8 (portrait)
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {
/* YOUR CSS GOES HERE */
}iPhone 6, 7, & 8 (landscape)
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
/* YOUR CSS GOES HERE */
}iPhone 6, 7, & 8 (portrait & landscape)
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
/* YOUR CSS GOES HERE */
}iPhone 6, 7, & 8 Plus
iPhone 6, 7, & 8 Plus (portrait)
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) {
/* YOUR CSS GOES HERE */
}iPhone 6, 7, & 8 Plus (landscape)
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) {
/* YOUR CSS GOES HERE */
}iPhone 6, 7, & 8 Plus (portrait & landscape)
@media only screen and (min-device-width : 414px) and (max-device-width : 736px) {
/* YOUR CSS GOES HERE */
}iPhone 5 & 5S
iPhone 5 & 5S (portrait)
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
/* YOUR CSS GOES HERE */
}iPhone 5 & 5S (landscape)
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
/* YOUR CSS GOES HERE */
}iPhone 5 & 5S (portrait & landscape)
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
/* YOUR CSS GOES HERE */
}