• Annonce ■ Personnaliser la version Mobile


    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 2019 à 19:29
    DrCut

    Merci pour cette astuce. smile

    Mercredi 12 Juin 2019 à 13:07
    Colette95

    Coucou stormalo,  yes

    Tu es vraiment "fortiche" !  

                                                                   

    Jeudi 13 Juin 2019 à 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 2019 à 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. 

    Mardi 31 Mars à 13:55
    sportitep

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

    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 ?

    Mardi 31 Mars à 14:59
    stormalo

    Ah, . . . Bonjour lambda smile

    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;}

    Jeudi 2 Avril à 19:45
    sportitep

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

    Samedi 4 Avril à 11:45
    DrCut

    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. :)

    Samedi 26 Septembre à 09:51
    Dbout

    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




    Vous devez être membre pour poster un message.