Texte différent sur version mobile et web

Résolu
Bonjour,

J'aimerai savoir si il et possible de mettre un text différent en fonction du css

Exemple :
Titre version pc : comment ça marche
Titre version mobile : c-ç-m

si oui comment faire ?

merci d'avance

2 réponses

  1. salut
    sinon en javascript tu peux faire ca (ne prend pas en charge le redimensionnement) donc reduire et actualiser pour vérifier

    <p id="change">ecran plus grand de 600 px</p>
    <script>
    var w = document.documentElement.offsetWidth;
    var elem = document.getElementById("change");
    if ( w < 600 ) { elem.innerHTML="ecran plus petit que 600px";}
    </script>


    sinon il y la solution suivante en ecrivant 2 fois le texte et cacher la version non désirée avec les class (mob ecran inférieur à 600px et nonmob supérieur à 600px)

    <p class="mob">ecran plus petit que 600 px</p>
    <p class="nonmob">ecran plus grand que 600 px</p>
    <p class="mob">version mobile</p>
    <p class="nonmob">version ordinateur</p>
    <p> Ici le texte pour toutes les versions</p>
    <script>
    var w = document.documentElement.offsetWidth;
    var mobile = document.getElementsByClassName("mob");
    var nonmobile = document.getElementsByClassName("nonmob");
    if (w > 600) {for(var i = 0; i < mobile.length; i++) {
        mobile[i].style.display = 'none';
    }}
    else {for(var i = 0; i < nonmobile.length; i++) {
        nonmobile[i].style.display = 'none';
    }}
    </script> 

    Un petit merci vaut mieux qu'une grande ignorance !
    Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
    2
    1. Que je suis bete j'ai pas pensé à la solution media querie !

      <p class="mobile">version mobile</p>
      <p class="nonmobile">version pc</p>


      .mobile {display:none;}
      .nonmobile {display:block;}
      
      @media screen and (max-width: 600px){
      .mobile {display:block;}
      .nonmobile {display:none;}
      }
      0
    2. La solution des media queries a été donnée plus haut par prosthetiks ^^.
      (lien codepen)
      0
    3. non c'est pas la meme chose
      la solution que je donne permet le referencement du texte
      prosthetiks utilise un ::before dans le css pour rajouter le texte (donc pas référencé)
      moi le texte est dans le html et display none ou block suivant le max-width en media queries
      0
    4. Solution correcte, attention au dédoublement de certains éléments (h1 en l'occurence), le référencement ne va pas aimer.
      0
    5. exact peut e^tre mettre un span avec display:inline; ou display none dans les h1, h2 ....
      genre
      <h1><span class="mobile">moins de 600</span><span class="nonmobile">plus de 600</span> pixels</h1> 

      évidement en faisant attention au keyword stuffing
      0
  2. En utilisant les pseudo-elements :before et :after tu peux setter un content différent en fonction de la résolution. Pour le titre, pas moyen en CSS, tourne toi vers le JS.
    0
    1. merci ! aurais-tu un exemple ?
      0
    2. Voila: http://codepen.io/anon/pen/aOBPVz

      Il faut resizer la fenêtre, le texte va changer
      0
    3. Je te mets juste en garde: les textes contenus dans le CSS ne seront pas référencés (ou très mal).
      0