Estoy tratando de hacer una página donde algunos elementos sean visibles solo para Android y iPhone. Estaba pensando en usar propiedades css simples para ocultar los elementos, por ejemplo:

HTML:

<style>img{ display:none;} </style>

<img src="img1.jpg" class="other">
<img src="img2.jpg" class="iphone android">
<img src="img3.jpg" class="iphone">
<img src="img4.jpg" class="android">
<img src="img5.jpg" class="iphone android other">

CSS 1 (para dispositivos diferentes a iPhone / Android)

.other{ display:inline;}

CSS 2 (para iphones)

.iphone{ display:inline;}

CSS 3 (para androides)

.android{ display:inline;}

Todo lo que necesito ahora es detectar el dispositivo de alguna manera (creo que jQuery puede hacerlo e implementar la hoja de estilo CSS correcta).

Entonces el efecto será:

img1: se muestra solo en dispositivos que no sean iphone y android

img2: se muestra solo en dispositivos iPhone y Android

img3: se muestra solo en iphones

img4: se muestra solo en dispositivos android

img5: se muestra solo en todos los dispositivos

¿Cómo puedo hacer que el navegador seleccione la hoja de estilo adecuada? Sé cómo hacerlo por resolución, pero sé que para los sistemas operativos funciona de manera diferente y se puede hacer en jquery. Sería perfecto si lo puedo hacer en una sección, así que puedo usar estilos en toda la página. Gracias por su tiempo y ayuda.