IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Detecter et charger un css pour smartphones


Sujet :

JavaScript

  1. #1
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Mars 2009
    Messages
    15
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2009
    Messages : 15
    Par défaut 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Pourquoi passer par JavaScript ?
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    <link rel="stylesheet" type="text/css" media="handheld" href="..." />
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Mars 2009
    Messages
    15
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2009
    Messages : 15
    Par défaut
    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....

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    http://dev.opera.com/articles/view/h...ent-to-mobile/

    http://detectmobilebrowser.com/

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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é
    }
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Mars 2009
    Messages
    15
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2009
    Messages : 15
    Par défaut
    Merci cela marche nickel,
    Il ne me reste plus qu'à peaufiner mon CSS pour les mobiles

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [TinyMCE] [text/css] probleme recurant pour charger le CSS sur un domaine https://
    Par pierrot10 dans le forum Bibliothèques & Frameworks
    Réponses: 1
    Dernier message: 01/02/2010, 21h54
  2. Problem pour charger un CSS
    Par pierrot10 dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 01/02/2010, 20h14
  3. [débutante]utiliser les classes css pour surligner des liens
    Par Mitaka dans le forum Général JavaScript
    Réponses: 18
    Dernier message: 06/01/2006, 09h37
  4. [CSS]à propos d'un css pour un site
    Par henri68 dans le forum Mise en page CSS
    Réponses: 10
    Dernier message: 26/12/2005, 23h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo