Modificare proprietà css solo per alcuni dispositivi come ipad o iphone

Capita realizzando siti, che testando su vari dispositivi, ti accorgi di qualche imperfezione che va rivista assolutamente.
Oggi vi parlo di un problema che ho avuto con una fancybox di una galleria che stavo preparando per un sito.

Fancybox è una visualizzazione delle foto di una galleria in stile popup con l’immagine ingrandita e creando un effetto ombra sul resto del contenuto

Tutto funzionava correttamente per la visualizzazione sul desktop, ma andando a testare il sito su iPhone e iPad ho riscontrato un problema con la fancybox, ovvero l’effetto ombra mi oscurava anche l’immagine che si doveva visualizzare.

Questo non è un problema comune, nel senso che visionando anche gli esempio di questo plugin, funziona correttamente su iPad, ma nel template che avevo creato, c’era qualcosa che andava in conflitto quando il browser era quello dell’iDevice.

Facendo un po’ di check in rete ho trovato che il problema si è presentato anche ad altri utenti, ma la loro soluzione (ovvero di rimuovere lo z-index del fancybox-overlay non mi risolveva il problema) anche se a tanti potrebbe andar bene:

.fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	/*z-index: 8010;     in questo modo ho -commentato- la riga*/
	background: url('fancybox_overlay.png');
}

la soluzione che poteva fare al caso mio era far sì che con gli iDevice venisse utilizzato il css con la riga commentata, MA per tutti gli altri device (desktop o altri browser mobile) questa riga venisse utilizzata.
Son giunto, grazie al prezioso aiuto del mio amico Christian Zoppi, a qualche riga di codice che faccia il riconoscimento del dispositivo utilizzato e nel caso non si un iDevice, allora aggiunga la riga di codice necessario (lo z-index) per far visualizzare correttamente la galleria.

    function isiDevice(){
      return ((navigator.platform.indexOf("iPad") != -1) || (navigator.platform.indexOf("iPhone") != -1) || (navigator.platform.indexOf("iPod") != -1));
    }

    $('.fancybox').fancybox(
      {
        beforeShow: function(){if (!isiDevice()) $('.fancybox-overlay').css('z-index','99999999998010');}
      }
    );

questo script va inserito in SOSTITUZIONE della classica riga di richiamo della funzione di fancybox ovvero

$('.fancybox').fancybox();

Chiaramente io/noi abbiamo pensato a questa modifica per risolvere il mio problema della fancybox con il mio template e la visualizzazione su iPad, ma si può benissimo customizzare per svariate funzioni.

Voi avete conoscete un altro metodo per risolvere questo tipo di inconveniente? perchè non me lo suggerite?

[ratings]