Adaptation disposition entre PC, Téléphone et tablette

Bonjour,

Grace à vous j’ai beaucoup avancé dans mon projet, et je vous en remercie.
Désormais je souhaiterais aller un peu plus loin, je personnalise déjà mes tableaux de bords, mais je constate que si je prépare ma disposition d’un tableau de bord sur PC, et que je me connecte ensuite sur tablette ou téléphone, que la disposition ne s’adapte pas du tout et fait des trucs tout cracra.

Existe t’il une fonction qui permet d’adapter les tableaux de bords aux appareils qui se connectent, ou n’avons nous vraiment pas le choix et devons nous créer autant de disposition différentes que d’appareils se connectant ?

Par avance, de nouveau merci à vous pour votre aide et votre patience.

Hello,

À titre perso, j’en ai créé un pour chaque appareil :

  • 1 pour la version desktop
  • 1 pour la version mobile, version la + développée
  • 1 pour la version tablette

Selon moi, c’est mieux, car tu ne vas pas afficher la même chose suivant le support, tu adaptes ton dashboard. La version mobile chez moi affiche quasiment tout pièce par pièce, pour la tablette, ce n’est pas utile, j’affiche une vue générale et vu comment elle est lente, je ne peux pas faire plus ^^

Déjà ça dépend de ton dashboard, mais si tu est parti sur des sections, de base il y a une certaine adaptation…

Quelques infos dans l’article là: Un beau dashboard, tout simplement...

Un petit bonus dans le post associé du forum avec une petite astuce sur comment tester son affichage sur divers appareil depuis son PC (lien dispo dans le 1er post)

J’ai le tableau de bord par défaut qui est la version PC regroupant toutes les infos avec des bubbles cards dans un découpage par zone avec des vues annexes pour la maintenance et des sous vue pour les équipements (aspirateurs, caméra, thermostat…).
Et j’ai créé des tableaux de bord Smartphone:

  • 1 dashboard smartphone découpée par pièce pour gérer l’espace (en cours de développement)
  • 1 dashboard smartphone par enfants avec juste un calendrier et le pilotage de leurs ampoules connectés. Vue définit par défaut sur leurs appli companion respective avec le Kiosk mode pour qu’il touche à rien d’autre.

La tablette sera surement un prochain sujet à développer chez moi.

En tout cas le plus simple est d’avoir des disposition par type d’appareil car les formats d’affichages font qu’il faut faire des choix et des concessions sur ce qu’on veut voir au premier coup d’oeil et ce qu’on veut disposer dans des sous vues.




Merci pour vos réponses.
Je vais donc multiplier les dashboards, même si j’utilise déjà les sections, c’est loin d’être suffisant malheureusement.

2 « J'aime »

Bonjour,

A propos de sections, as tu convertie des vues en sections ?

Si oui, as tu remarqué que pour les appeler via une carte dans une vue, il faut mettre l’identifiant de la section, le friendly name ne fonctionnant plus ?

Je ne vois pas du tout cette page (enfin les options montrées) même en ajoutant une grille

Tout simplement car tu n’as pas défini d’url pour ta page.

1 « J'aime »

OK, je vois.
Merci pour les réponses.

Pour ma part, j’ai tout refait en section et mon seul dashboard est très lisible sous tous les devices : PC, smarphone et tablette. Je gère juste la visibilité de certaines cartes selon l’écran et l’utilisateur.
PC : j’ai dézoomé volontairement, tout est visible


Tablette : issue d’une image kiosk fully browser, chips du bas masqués
image
Smartphone : masqué méto, caméra…

Le paramétrage de visibilité :

2 « J'aime »

Tu as tout simplement raison !!!

Merci !

@Jeffodilo , pour la science, si tu utilise l’astuce donnée là:

Est ce que tes logiques de visibilité marchent bien sur la prévisualisation sur PC?

En tout cas ton exemple est un très bon exemple de la force des sections et de la visibilité des différents éléments du dashboard pour réussir à faire quelque chose d’adaptatif !
Joli et bravo !

Merci, c’est en te lisant et les autres que j’ai décidé de simplifier mon dashboard qui devenait trop dur à maintenir. J’ai mis un moment à me mettre aux sections, cela fait 2 ou 3 semaines seulement. J’ai fait quasi 2 ans avec le seul dashboard mobile de l’article de Argonaute.
J’étais passé au travers de ton astuce pour tester mais pour le moment, tout ce que je fais sur mon PC (au moins 2 PC différents) et que je décide de passer en visibilité sur tablette et smartphones passe nickel. Je ne m’étais même pas posé la question :laughing:.
Je fais principalement des vues en 2 sections et parfois je passe une section en 2 colonnes comme pour faire une entête pleine largeur.

Edit: @BBE je n’ai pas bien répondu à la question :rofl:,

Non ca ne semble pas du tout bien fonctionner, cela ne donne pas pareil, voir ma vue du dessus en smarphone, tout se met sur 1 section


T’es sûr de ton setting ?

Quand je regarde même des devices très haut de gamme, je trouve ce genre de résolution affichée (alors que la résolution de la dalle de l’iphone14 pro max est de 2 796 x 1 290 pixels):
image

1220 pixel de large sur la dalle oui, mais en vrai il doit faire plus gros sur l’affichage sinon c’est tout petit… non?

Non sûr de rien, j’ai pas trop compris, j’ai collé la résolution que j’ai trouvé de mon Xiaomi 13T. Je regarderais cela demain en approfondissant…

C’est pas facile à comprendre cette histoire de viewport CSS :sweat_smile:
Si je comprends ca serait ces infos pour avoir cette fameuse résolution


Ce qui me ferais 549x1220 ?
Ca serait plus cohérent , je teste demain