How to Target the iPad Exclusively Using CSS Media Queries?

Targeting the iPad Exclusively Using CSS Media Queries

In a multi-device environment, isolating specific devices can be challenging, especially when they share similar dimensions. One such case is distinguishing iPads from other tablets like LG Pads and Galaxy Tabs, all of which have a 768px device width.

To address this problem, CSS media queries offer a solution. However, conventional methods like min-device-width and max-device-width are ineffective due to the overlapping width.

Solution:

Finally, a method leveraging device height resolves the issue:

<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 solution targets devices with a width of 768px, a height of 1024px, and either portrait or landscape orientation, effectively isolating iPads.

To minimize HTTP calls, the media queries can be embedded within the main CSS file:

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

Additionally, refer to the following resources for more insights:

• https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html

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