Blog
Select Page

IPad-Specific CSS

Misc

IPad-Specific CSS
IPad-Specific CSS

Here’s IPad only CSS that worked for me. You might have a situation where you need to add certain styles targeting IPads only. Use this code and please let me know in comments if it worked for you.

CSS File – Include Method

Add this code in <head> section and write styles to the files.

<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape)" href="ipad-landscape.css" />
<link rel="stylesheet" media="all and (device-width: 1024px) and (device-height: 1366px) and (orientation:portrait)" href="ipad-pro-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 1366px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-pro-landscape.css" />

To saving Http request you can put all code in one CSS file.

CSS Code

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}