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 */
}