Affichage scale IOS/Android

[ArmandGC]

Bonjour,
Je viens de tester un petit projet en affichage sur smartphone mais l'affichage diffère fortement entre Iphone et android

Affichage IOS (Iphone 13 pro) :

Affichage android (Samsung S23U) :

A savoir que sur le PC même en réduisant la taille de mon navigateur tout fonctionne en change de taille correctement.
mes tailles sont toutes relatives a la taille de l'écran je ne comprend donc pas d'où ce problème vient.

Egalement sur IOS en plus de la zone blanche tout autour j'arrive encore a décaler l'affichage de droite a gauche, ce qui n'est pas faisable sur le téléphone android.

[manufitoussiwit]

Bonjour, la différence vient surtout des différentes tailles d'écran. Je dirai comme ça qu'il y un truc avec la largeur des boutons qui ne va pas.

Pouvez vous copier/coller ici la scène ou son acteur principal qui contient les acteurs boutons s'il vous plait ?

https://witsa.github.io/synapps/tutorials/copy-paste-actor-scene-composite.html

[ArmandGC]

Bonjour,
voila l'acteur pour les boutons :

SYNAPPS-STUDIO-ACTOR|{"properties":{"orientation":"horizontal","marginTop":"2px","overflowX":"auto","overflowY":"auto"},"key":"TopMenu1","type":"layout/stack","children":[{"type":"display/text","key":"text2","properties":{"content":"Text","width":"80px","verticalAlignment":"middle","marginLeft":"1vw","color":"rgba(0, 0, 0, 1)","fontWeight":"bold"},"bindings":{"properties.content":{"path":"properties.sceneKey","sourceType":"actor","sourceKey":"screen13"}}},{"properties":{"overflowX":"auto","overflowY":"auto","orientation":"horizontal","horizontalAlignment":"middle"},"key":"menuOutter1","type":"layout/stack","children":[{"properties":{"overflowX":"auto","orientation":"horizontal"},"key":"menuPrincipal1","type":"layout/stack","children":[{"properties":{"displaySceneKey":"Accueil","screenActorKey":"screen13","width":"7vw"},"key":"buttonAccueil1","type":"input/nav-button","styleName":"side-menu-button","additionalDefs":{"icon":{"type":"icon","modifier":"render","label":"icon"},"text":{"type":"text","modifier":"render","label":"text"}},"additionals":{"icon":"home","text":"Accueil"},"bindings":{"properties.width":{"path":"LargeurBtnMenuTop","sourceType":"constant"}}},{"type":"input/button","key":"Chauffage","properties":{"content":"<i class=\"icon-{{icon}}\"></i> {{text}}","visible":false},"additionalDefs":{"icon":{"type":"icon","label":"Icône","description":"Web Hosting Hub Glyphs"},"text":{"type":"text","label":"Texte"}},"additionals":{"icon":"watertap-plumbing","text":" Chauffage"},"bindings":{"properties.width":{"path":"LargeurBtnMenuTop","sourceType":"constant"}}},{"type":"input/button","key":"Ventilation","properties":{"content":"<i class=\"icon-{{icon}}\"></i> {{text}}","visible":false},"additionalDefs":{"icon":{"type":"icon","label":"Icône","description":"Web Hosting Hub Glyphs"},"text":{"type":"text","label":"Texte"}},"additionals":{"icon":"cooling","text":"Ventilation"},"bindings":{"properties.width":{"path":"LargeurBtnMenuTop","sourceType":"constant"}}},{"styleName":"side-menu-button","properties":{"displaySceneKey":"agenda","screenActorKey":"screen13","visible":false},"key":"buttonAgenda1","type":"input/nav-button","additionalDefs":{"icon":{"type":"icon","modifier":"render","label":"icon"},"text":{"type":"text","modifier":"render","label":"text"}},"additionals":{"icon":"calendar","text":"Calendrier"},"bindings":{"properties.width":{"path":"LargeurBtnMenuTop","sourceType":"constant"}}},{"properties":{"displaySceneKey":"agenda","screenActorKey":"screen13"},"key":"exemple1","type":"input/nav-button","styleName":"side-menu-button","additionalDefs":{"icon":{"type":"icon","modifier":"render","label":"icon"},"text":{"type":"text","modifier":"render","label":"text"}},"additionals":{"icon":"hourglassalt","text":"Agenda"},"bindings":{"properties.width":{"path":"LargeurBtnMenuTop","sourceType":"constant"}}},{"styleName":"side-menu-button","properties":{"displaySceneKey":"Historiques","screenActorKey":"screen13"},"key":"buttonAnalyse1","type":"input/nav-button","additionalDefs":{"icon":{"type":"icon","modifier":"render","label":"icon"},"text":{"type":"text","modifier":"render","label":"text"}},"additionals":{"icon":"seo","text":"Graphique"},"bindings":{"properties.width":{"path":"LargeurBtnMenuTop","sourceType":"constant"}}},{"properties":{"displaySceneKey":"Journal","screenActorKey":"screen13"},"key":"exemple2","type":"input/nav-button","styleName":"side-menu-button","additionalDefs":{"icon":{"type":"icon","modifier":"render","label":"icon"},"text":{"type":"text","modifier":"render","label":"text"}},"additionals":{"icon":"info-sign","text":"Journal"},"bindings":{"properties.width":{"path":"LargeurBtnMenuTop","sourceType":"constant"}}}]}],"bindings":{"properties.backgroundColor":{"sourceType":"color","path":"fondMenu"}}}],"bindings":{"properties.color":{"sourceType":"color","path":"themeColor"},"properties.height":{"sourceType":"actor","sourceKey":"tailles","path":"additionals.hauteurMenu"}}}

a la base il s'agit d'un projet générer avec le modèle "tablette et bureau" que j'ai modifier pour avoir le menu en haut et non a gauche, le problème vient peut être d'une erreur lors de la modification

[manufitoussiwit]

Les boutons ont tous une liaison vers une constante :

Je pense que la valeur de cette constante est dans une unité % ou bien vw, peut être même en px. Le mieux ici c'est de lever cette contrainte en supprimant les liaisons et en laissant la valeur auto. ça donnera peut être des boutons de différentes tailles mais ça assura qu'il sont bien affichés.

[ArmandGC]

la largeur est effectivement de 8vw.
j'ai tester et effectivement ça corrige le problème mais j'ai la même chose sur la barre de menu au dessus avec ma température ainsi que le nom d'utilisateur je pense. ça ne va pas être possible de tout mètre en largeur automatique, surtout que la raison pour laquelle j'avais mis mes unités en vh et en vw était justement pour que la vue s'adapte à l'écran.

également à savoir, avec la prévisualisation sous synapps l'affichage est "correct" même en sélectionnant Iphone 12 Pro :