How to Target iPads Specifically with CSS Media Queries?

Devising a CSS Media Query to Target iPad Exclusively

When working with various tablet devices like iPad, Galaxy Tab, Acer Iconia, and LG 3D Pad, the task of targeting specific devices with CSS media queries can be challenging, especially when they share similar properties. Take the iPad and LG Pad as an example; both have a device width of 768px, making it difficult to distinguish them.

To resolve this issue and target the iPad exclusively using CSS3 media queries, consider the following solution:

<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: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />

This approach precisely targets the iPad by defining specific device width, height, and orientation criteria.

Alternatively, to minimize HTTP requests, you can embed the media queries within your existing CSS file:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; } /* CSS rules for iPad portrait */
}
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  .ipad-landscape { color: blue; } /* CSS rules for iPad landscape */
}

Refer to the following resources for further information:

• [Detect Different Device Platforms Using CSS](https://css-tricks.com/snippets/css/detect-different-device-platforms-using-css/)
• [Other Standard CSS3 Features](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html)

The above is the detailed content of How to Target iPads Specifically with CSS Media Queries?. For more information, please follow other related articles on the PHP Chinese website!