detection mobile ou pc

Version imprimable

12/10/2010, 16h29
ploufleouf74

detection mobile ou pc

Bonjour.

J'ai fait un site en HTML qui doit être compatible également pour les mobiles.

Pour ce faire j'ai du faire 3 index et 3 css différents.

- 1 index + css pour les ordinateurs
- 1 index + css pour les mobiles avec ration d'écran type iphone /htc...
- 1 index + css pour un blackberry avec format d'écran particulier.

pour les ordinateurs, mon index+css se trouve à la racine.
Sur cette racine, j'ai également :
- un dossier mobile qui contient index+css pour les mobiles au ratio d'écran standard
- un dossier black qui contient index+css pour le ratio particulier blackberry.

Ma question est la suivante.
Il faudrait que je puisse faire une detection en javascript :

si on est sur ordinateur, envoyer : index+css
si on est sur mobile, envoyer : /mobile/index+css
sauf pour le modèle blackberry xxx, envoyer : /black/index+css

Voila, j'espere que ma demande est claire.
Je remercie d'avance ceux qui pourront m'aider à avancer.
12/10/2010, 17h38
Watilin

Salut,

c’est sur ton serveur que tu dois détecter le type de plateforme. Il faut que tu analyses la User Agent String envoyée par le client pour déterminer les fichiers à envoyer.

Quel est le langage de ton serveur ?
12/10/2010, 19h46
ploufleouf74

Heu je sais pas
mais y'a pas moyen de mettre un index qui chapotte le tout ?
Dans cet index il y aurait la detection js qui envoie ensuite les bon fichiers ?

ou alors mettre ce js dans l'index pc qui lui serait a la racine (histoire que ca affiche quelque chose au cas ou le js est desactivé..)

ce pas faisable ca ?
13/10/2010, 13h55
Watilin

Si tu cherches à détecter le type de mobile en JS, ça signifie que tu dois déjà avoir envoyé le JS (car le JS s'exécute côté client). Donc tu auras au final deux pages à envoyer au lieu d'une seule.

Et comme tu le dis toi-même, si JS est désactivé, ça ne marche plus.
Je répète ma question : quel est le langage de script dont tu disposes sur ton serveur ? PHP ? ASPX ?

Je ne connais pas le réponse a ta question mais j'ai trouvé la réponse à la mienne.

Je poste la solution, ca pourrait intéresser quelqu'un :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
    var userAgent = navigator.userAgent.toLowerCase();
    if (userAgent.indexOf('blackberry') != -1) {
        document.location.href = 'black/index_black.html';
    }
    else if (userAgent.indexOf('iphone') != -1 || userAgent.indexOf('ipod') != -1) {
        document.location.href = 'mobile/index_iphone.html';
    }
    else if (screen.width <= 480 && screen.height <= 800) {
        document.location.href = 'mobile/index_mobile.html';
    }
    else if (userAgent.indexOf('ipad') != -1) {
        document.location.href = 'ipad/index_ipad.html';
    }
 
Merci a toi Watilin !