How To Target iPads Exclusively with CSS Media Queries?

Targeting iPad Exclusively with CSS Media Queries

Targeting specific devices with CSS media queries can be challenging, especially when devices share similar screen dimensions. To isolate the iPad, consider these approaches:

Using Device-Width and Device-Height:

The provided media query can be refined by specifying both the device width and height, which is unique to the iPad:

@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (min-device-height: 1024px) and (max-device-height: 1024px)

Combining Device-Width and Resolution:

Alternatively, you can combine device-width with device resolution:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (min-resolution: 132dpi)

Using Media Queries Linked to Specific Stylesheets:

For better efficiency, you can create separate stylesheets tailored for iPad and include them conditionally based on device-specific media queries:

<code class="html"><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" /></code>

Incorporating Media Queries within CSS:

To reduce HTTP requests, you can define device-specific CSS rules within your main stylesheet:

<code class="css">@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; }
}</code>

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