Comment cibler les mobiles de manière optimale ?

Dans la quête de l’adaptation intelligente de design pour tailles d’écran différentes (CSS responsive web design), j’en arrive à adopter la technique suivante :

1- toujours forcer le viewport ainsi (pour écraser la valeur de viewport par défaut) :

<meta name="viewport" content="width=device-width">

2- Appeler les feuilles de styles (écrans de bureau et périphériques mobiles) ainsi :

<link rel="stylesheet" href="styles.css" media="screen and (min-device-width:641px)">
<!--[if lt IE 9]> <link rel="stylesheet" href="styles.css" media="screen"> <![endif]-->

<link rel="stylesheet" href="mobile.css" media="handheld, screen and (max-device-width:640px)">
<!--[if IEMobile 7]> <link rel="stylesheet" href="mobile.css" media="screen"> <![endif]-->

Le principe que j’ai appliqué et mes contraintes sont les suivants :

J’ai opté pour deux feuilles de styles séparées afin d’optimiser les performances (pas de chargements inutiles d’éléments pour les cacher ensuite). Cela signifie que dans certains cas de figure, un grand nombre de styles devront peut-être dupliqués. A vous de voir si ce choix convient à votre projet.
J’ai choisi le critère device-width (largeur d’écran) et non width (largeur de fenêtre) pour application exclusive sur mobiles / tablettes et non écrans de bureau. Vous pouvez changer ce critère selon vos besoins.
La feuille de styles pour écrans de bureau est appelée via “screen and (min-device-width:641px)” -> Elle n’est donc appelée que pour les tailles supérieures ou égales à 641px (sauf sur IE < 9 qui ne comprend pas cette syntaxe)
Un commentaire conditionnel If lt IE 9 appelle la feuille styles.css (écrans larges) pour Internet Explorer
La feuille de styles pour mobiles est appelée via “handheld, screen and (max-device-width:640px)” -> Elle n’est donc appelée que par les petits écrans et j’ajoute un bonus pour les périphériques très anciens (handheld). Cette partie “handheld” peut être supprimée si vous ne souhaitez pas appliquer de styles mobiles (généralement remplis de CSS avancées) pour ces vieux terminaux.
Enfin un commentaire conditionnel If IEMobile appelle le fichier mobile.css uniquement par IE7 mobile sur Windows Mobile (inutile pour IE9 et commentaire non reconnu par IE<7)