• Annonce ■ Personnaliser la version Mobile [astuces]


    Mercredi 13 Juin 2018 à 14:52
    stormalo

    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      

    Mercredi 30 Janvier à 19:29
    DrCut

    Merci pour cette astuce. smile

    Mercredi 12 Juin à 13:07
    Colette95

    Coucou stormalo,  yes

    Tu es vraiment "fortiche" !  

                                                                   

    Jeudi 13 Juin à 20:41
    stormalo

    @ 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.

     

    Vendredi 14 Juin à 10:24
    Colette95

    @stormalo

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

    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. 




    Vous devez être membre pour poster un message.