Configuration d'affichages pour différents périphériques mobiles

Question

Est-ce que quelqu'un connaît un moyen d'avoir des feuilles de style CSS spécifiques en fonction du type de périphérique mobile? Je l'ai fait des recherches il y a quelques jours et je n'ai rien trouvé d'autre que cet extrait de code pour iPhones.

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

Cela fonctionne très bien pour les iPhones, mais sur tous les autres appareils mobiles (Android, Blackberry, Nokia), il est toujours le même affichage que mon site. J'ai essayé:

<link media="handheld" href="iPhone.css" type="text/css" rel="stylesheet" /> 

mais cela ne semble pas avoir d'effet sur les autres appareils mobiles. Donc je ne sais pas comment atteindre les BlackBerry/androïdes/nokia sans affecter le code de mon site actuel.

Je construis mon site en utilisant le framework PHP CodeIgniter et j'ai regardé dans ce code qui est supposé être capable de dire s'il est regardé à travers un appareil mobile ou un navigateur.

if ($this->agent->is_browser()) 
{ 
    $agent = $this->agent->browser().' '.$this->agent->version(); 
} 
elseif ($this->agent->is_mobile()) 
{ 
    $agent = $this->agent->mobile(); 
} 
else 
{ 
    $agent = 'Unidentified User Agent'; 
} 

Le seul problème est que les nouveaux téléphones que nous construisons sur rendre le site en tant que navigateur et non pas comme un mobile (je pense, je ne l'ai testé l'iPhone car il est tout ce que j'ai pour le moment) . Alors, quelqu'un a-t-il des solutions de rechange pour les autres plateformes téléphoniques?

Answer 1

L'interfaçage avec WFURL est censé être la pratique habituelle pour trouver la taille de l'écran et sélectionner la bonne feuille de style.

Answer 2

A List Apart ont a great article on their Web site tout sur les feuilles de style mobiles. J'espère que ça aide.