Texte différent sur version mobile et web

Résolu
tiran58 Messages postés 67 Statut Membre -  
animostab Messages postés 3003 Statut Membre -
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


A voir également:

2 réponses

Réponse 1 / 2
animostab Messages postés 3003 Statut Membre 738
 
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
animostab Messages postés 3003 Statut Membre 738
 
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
Utilisateur anonyme
 
La solution des media queries a été donnée plus haut par prosthetiks ^^.
(lien codepen)
0
animostab Messages postés 3003 Statut Membre 738
 
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
prosthetiks Messages postés 1309 Statut Membre 431
 
Solution correcte, attention au dédoublement de certains éléments (h1 en l'occurence), le référencement ne va pas aimer.
0
animostab Messages postés 3003 Statut Membre 738
 
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
Réponse 2 / 2
prosthetiks Messages postés 1309 Statut Membre 431
 
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
tiran58 Messages postés 67 Statut Membre 13
 
merci ! aurais-tu un exemple ?
0
prosthetiks Messages postés 1309 Statut Membre 431
 
Voila: http://codepen.io/anon/pen/aOBPVz

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

Discussions similaires

Retrouver mes factures réglo mobile
Conde -
Mlv2a -

7 réponses