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 :

Appeler une feuille de style suivant l'orientation de l'écran


Sujet :

JavaScript

  1. #1
    Membre éclairé

    Homme Profil pro
    Webmaster, Réalisateur Vidéo, Chef de projet Web documentaire
    Inscrit en
    Juillet 2006
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webmaster, Réalisateur Vidéo, Chef de projet Web documentaire
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juillet 2006
    Messages : 404
    Par défaut Appeler une feuille de style suivant l'orientation de l'écran
    Bonjour

    Mes connaissances en JS sont très limités. Comme le titre l'indique je voudrais appeler une feuille de style différente suivant que l'écran de la tablette ou du téléphone sont en mode portrait ou paysage.
    J'ai essayer de compiler différents scripts trouvé sur le net, mais ça ne fonctionne pas.
    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
    <html><HEAD>
     
    <SCRIPT type="application/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js">
     
     
    var width = screen.width;
    var height = screen.height;
     
    /* Appelé quand le device passe en mode portrait. */
    function mode_portrait() {
     $("head").append(
        $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"Vstyles.css"})
      );
     
    }
     
     
    /* Appelé quand le device passe en mode paysage. */
    function mode_paysage() {
     $("head").append(
        $(document.createElement("link")).attr({rel:"stylesheet", type:"text/css", href:"Hstyles.css"})
      );
    }
     
    window.onorientationchange = function() {
      var orientation = window.orientation;
     
      /* Trois cas de figure possible :
       *  - le device a un écran plus large que haut.
       *  - le device a un écran plus haut que large.
       *  - le device trouve intelligent de modifier la largeur
       *    et la hauteur de l'écran en fonction de son orientation...
       * 
       * Du coup, soit la largeur/hauteur de l'écran change, et
       * on en déduit à partir de là l'orientation, sinon il faut
       * se fier à la variable window.orientation, et en déduire
       * d'après le ratio de l'écran l'orientation...
       */
     
      if (screen.width != width || screen.height != height)
      {
        width = screen.width;
        height = screen.height;
     
        if (screen.width > screen.height)
          mode_paysage();
        else
          mode_portrait();
      }
      else if (screen.width > screen.height)
      {
        if (orientation == -90 || orientation == 90)
          mode_portrait();
        else
          mode_paysage();
      }
      else
      {
        if (orientation == 90 || orientation == -90)
          mode_paysage();
        else
          mode_portrait();
      }
    }</SCRIPT></HEAD>
     
    <body>
     
     <p> TEST mod </p>
     
    </body>
     
    </html>

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Bonjour,
    tu n'as pas plutôt pensé à regarder du coté des Media Queries?

  3. #3
    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
    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 !

  4. #4
    Membre éclairé

    Homme Profil pro
    Webmaster, Réalisateur Vidéo, Chef de projet Web documentaire
    Inscrit en
    Juillet 2006
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Webmaster, Réalisateur Vidéo, Chef de projet Web documentaire
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juillet 2006
    Messages : 404
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    tu n'as pas plutôt pensé à regarder du coté des Media Queries?
    Mais bon sans mais c'est bien sur, j'avais oublié merci c'est effectivement beaucoup plus simple.

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

Discussions similaires

  1. Appeler une feuille de style
    Par Jean Sympa dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 16/01/2011, 10h08
  2. Appel d'une feuille de style dans une fonction header() ?
    Par boucamleg dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 13/08/2010, 17h51
  3. Réponses: 4
    Dernier message: 29/07/2008, 09h49
  4. Réponses: 1
    Dernier message: 03/06/2008, 14h27
  5. Rattacher une feuille de style a un XML existant
    Par aour dans le forum XML/XSL et SOAP
    Réponses: 5
    Dernier message: 08/10/2002, 22h07

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