How do I differentiate between Android and iPad with media query?

In a page I'm making, I'm writing a secondary stylesheet for mobile devices that overwrites selected parts of the first stylesheet.

I'm using media queries in the following way:

<link rel="stylesheet" href="assets/ui.css">
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="assets/ui_mobile.css" type="text/css">

Th开发者_开发知识库is works for iPhone. My goal is to create a query that will activate if it's an iPhone or Android, and then let the iPad use the standard desktop styling.

When I switch it to max-device-width: 800px, it triggers on the iPhone and Android, but also triggers on iPad. It should not be doing this, as the max-device-width of the iPad is allegedly 780px. But it is, for whatever reason.

I've used many permutations of various widths, heights, and aspect ratios, but to no avail. Does anyone know a workable way of differentiating between these three?

Any suggestions are appreciated. Thanks!

---

When I switch it to max-device-width: 800px, it triggers on the iPhone and Android, but also triggers on iPad. It should not be doing this, as the max-device-width of the iPad is allegedly 780px. But it is, for whatever reason.

I think you're misunderstanding how max-device-width works. Since the max-device-width of an iPad is 780px, it falls below the 800px limit just as validly as the iPhone does.

---

Try using physical measurements rather than pixels - what you are trying to do is restrict to small screens, independent of resolution. Try

max-device-width:12cm

Which will only match physically small screens, like a phone (no matter how high resolution), but not larger ones like tablets, regardless how the resolutions change in the future.