Detecter et charger un css pour smartphones

Tout d'abord bonjour à tous,

Je sollicite votre aide concerant la réalisation d'un javascript destiné à repérer les principaux navigateurs mobiles, et si tel est le cas, charger un css particulier pour le site. N'ayant pas de smartphones du type "iPhone" (je possede un Nokia E71) je ne peux réellement tester mon javascript, qui semble d'ailleurs ne pas fonctionner correctement.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
 var uagent = navigator.userAgent.toLowerCase();
 
 function DetectIphone()
        {
        if (uagent.search(deviceIphone) > -1)
         return true;
        else
         return false;
        }
 
        function DetectIpod()
        {
         if (uagent.search(deviceIpod) > -1)
        return true;
        else
        return false;
        }
 
        var deviceS60 = "series60";
        var deviceSymbian = "symbian";
        var engineWebKit = "webkit";
        var uagent = navigator.userAgent.toLowerCase();
 
        function DetectS60OssBrowser()
        {
        if (uagent.search(engineWebKit) > -1)
        {
        if ((uagent.search(deviceS60) > -1 || 
          uagent.search(deviceSymbian) > -1))
        return true;
        else
        return false;
        }
        else
         return false;
        }
 
        var deviceAndroid = "android";
 
        function DetectAndroid()
        {
        if (uagent.search(deviceAndroid) > -1)
        return true;
        else
        return false;
        }
 
 
        function DetectAndroidWebKit()
        {
         if (DetectAndroid())
        {
         if (DetectWebkit())
        return true;
        else
        return false;
        }
         else
        return false;
        }
 
        var deviceWinMob = "windows ce";
 
        function DetectWindowsMobile()
        {
         if (uagent.search(deviceWinMob) > -1)
        return true;
        else
        return false;
        }
 
        var deviceBB = "blackberry";
 
        function DetectBlackBerry()
        {
        if (uagent.search(deviceBB) > -1)
        return true;
        else
        return false;
        }
 
 
        function browser()
        {
        if (DetectIphone()) || (DetectIpod()) || (DetectS60OssBrowser()) || (DetectAndroidWebKit()) || (DetectWindowsMobile()) || (DetectBlackBerry()))
        document.getElementById("browser_css").href = "mobile.css";             
        }
 
        window.onload = browser();

Voici sa mise en place sur mon site : http://195.220.111.37/~mai1025432
Pour ce code, voilà les références que j'ai utilisées

http://www.hand-interactive.com/reso...javascript.htm

Ce qui me semble bizarre, c'est que ces fonctions devraient retourner "vrai" si le navigateur est détecté et pas l'inverse non?

Je suis également ouvert à toute autre remarque concernant mon site.
D'avance merci.

Pourquoi passer par JavaScript ?

Code:

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

Il m'a été recommandé de procéder ainsi du fait que par exemple le navigateur de l'iPhone est basé sur Webkit et se considère comme "screen", je ne sais pas ensuite ce qu'il en est des autres smartphones.

edit: apparement le probleme est le même pour les BlackBerry Bold... et sans doute d'autres
Visiblement cette norme définie par le W3C ne semble pas massivement utilisée par les constructeurs....

http://dev.opera.com/articles/view/h...ent-to-mobile/

http://detectmobilebrowser.com/
Code:

1 2 3 4 5 6 7 if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) ){ // mobile detecté }

Merci cela marche nickel,
Il ne me reste plus qu'à peaufiner mon CSS pour les mobiles :D