• Annonce ■ Personnaliser la version Mobile [astuces]


    Mercredi 13 Juin à 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  :

    - (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

    - (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, à adapter éventuellement

     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      




    Vous devez être membre pour poster un message.