Objectif :

 A partir d'une rédaction unique, ne pas afficher la même chose sur les deux versions, "standard" ou "mobile".

 Pourquoi ?   Par exemple  :

 - Pour afficher en "version Mobile", un accueil avec l'équivalent du header manquant, simuler un menu de l'en-tête, ajouter des liens, voire une information quelconque. 

- pour afficher deux contenus différents selon les versions mobile ou standard, tout en utilisant en réalité une Page simple unique. (par ex. pour l'affichage d'une page d'accueil, d'un espace remplaçant certains modules etc... )

- afficher selon la pertinence, certains liens à suivre, textes, images....

L'astuce en deux principes  :

- ( pour version mobile MOB  ) Intervenir par un css ajouté au thème, pour ne pas afficher en version Standard ce qui est prévu pour être affiché uniquement sur la version Mobile

et / ou

- ( pour version standard STD  ) Intervenir par un css placé dans zone de script, pour ne pas afficher en version Mobile ce qui doit être affiché uniquement en version Standard 
Ce css étant présent dans les deux versions, il doit permettre au navigateur de " faire ceci, sauf s'il peut faire cela ". Ce css a donc deux instructions : la première n'étant retenue par le navigateur que si la seconde n'est pas réalisable.

  ---------------------------------------

 Exemples pour la mise en code : ( html et css )
note: les noms en rouge sont des exemples, à définir selon le choix de chacun.

 Si choix de sélection css sur un identifiant
(En utilisant un  identifiant id="   " )
ici un exemple en utilisant un  id="mobileseul"   pour une balise <div> 
Rappel > qui doit  être unique sur la page internet affichée  (règle html)

 Exemple1    pour afficher en version MOB (mobile seulement) :

Placer le contenu HTML concerné entre un :    <div id="mobileseul"> ... et ...  </div>

Ajouter ce CSS dans le thème :         #mobileseul {display: none;}

 Exemple2    pour  afficher en version STD (standard seulement) : 

Placer le contenu HTML concerné entre un     <div id="standardseul">  et  </div>

Ajouter ce CSS dans la zone de script :
  <style><!--
#standardseul{display: none;}
#background #standardseul{display: block;}
--></style>

 Si choix de sélection css sur une classe de style  
(En utilisant les styles class="   " )
ici en utilisant   class="mobileseul "   et    class="standardseul"
Rappel > qui peuvent être utilisés plusieurs fois dans la même page internet  affichée à l'écran. (règle html)

  Exemple3    pour afficher en version MOB (mobile seulement) :

Affecter au contenu HTML concerné un nom de class :  class="mobileseul"

Ajouter ce CSS dans le thème :    .mobileseul {display: none;}

  Exemple4    pour  afficher en version STD (standard seulement) : 

Affecter au contenu HTML concerné un nom de class :    class="standardseul"

Ajouter ce CSS dans la zone de script :  
<style><!--
.standardseul{display: none;}
#background .standardseul{display: block;}
--></style>

  ------------------------------------------------------------------------------------------------
 
Exemples et précisions en  ANNEXE➚      

Merci pour cette astuce.

Coucou stormalo,  

Tu es vraiment "fortiche" !  

@ Colette95

  ヽ(° ͜>°)ﾉ  Merci pour le "fortiche" concernant cette astuce au code simplissime.  

. . . par contre la mise en forme des explications est sans aucun doute perfectible, car ça semble paraitre compliqué pour certaines personnes .

Bien sûr il faut au minimum savoir ce que signifient les mots html et css. ㋡

@stormalo

Pour le blogueur lambda, c'est quand même du chinois.  

Comme je te l'avais dit il y a x.... temps, je ne connais pas tous les recoins et possibilités de cette plateforme et n'aurai pu imaginer que cela était possible d'intervenir dans la présentation version mobile, notamment pour un y mettre un menu. 

J'avoue avoir planché dessus pendant plusieurs jours car en m'y intéressant j'ai découvert une anomalie importante sur mon livre d'or (totalement absent de la version mobile), mais que je souhaitais faire apparaître en raison des commentaires supprimés sous mes articles, et qui s'affichait totalement décalé en version mobile, grosse erreur qu'il m'a fallu comprendre et rectifier due à de mauvais codes appliqués en version standard. Mes neurones ont fumé crois-moi... 

Donc je persiste et signe, tu es le meilleur. 

Bonjour, je fais malheureusement partie de la catégorie "blogueur lambda"

Tout cela est donc effectivement du chinois pour moi. Serait-il possible d'avoir la démarche détaillée pour optimiser le blog lorsqu'il est consulté d'un mobile ?

Ah, . . . Bonjour lambda , 

Optimiser c'est faire pour le mieux, encore faut il savoir quel est le besoin.

Ce que j'ai expliqué nécessite d'intervenir dans le code. Il faut au minimum savoir ce qu'est le langage html et css et les moyens pour y accéder

Exemple pour faire apparaitre quelque chose uniquement en version mobile :

Placer le contenu HTML concerné entre   <div id="mobileseul"> ... et ...  </div>
Ajouter ce CSS dans le thème :         #mobileseul {display: none;}

> voici comment faire :
Dans le code source (icône < >  de l'éditeur) tu repères la partie du code concernée, tu la fait précéder de l'écriture <div id="mobileseul"> et tu la fais suivre de  </div>

Ensuite il faut aller dans Modifier le thème > Ajouter du css et ajouter au code existant #mobileseul {display: none;}

Merci pour votre réponse, je crois qu'il ne me reste plus qu'à me former sur le sujet

Après les modifs, on peut voir aussi en entrant l'adresse de notre blog si le design s'adapte bien sur les autres supports : http://ami.responsivedesign.is/#

See your site responsive

On peut cliquer directement sur les écrans de supports pour voir les autres pages de nos blogs. Plutôt cool. :)

Bonjour,

depuis quelques jours impossibilité de sélectionner la version standard sur mobile et j'avoue ne pas comprendre la manip ci dessus (ou placer le HTML ) et si je fais copier collé dans le CSS = erreur

Merci pour votre aide