Design qui s'ouvre en zoomé sur mobile

Utilisation du core de Jeedom Design
1

Bonjour,
J’ai un design qui s’ouvre en zoomé sur mon mobile (bien en plein écran mais zoomé).
La seule solution est de faire un double tap sur l’écran qui se met en autofit et la ca devient parfait.
Ma question est, comment faire pour arriver initialement en autofit.

J’ai testé:

  • La résolution de mon design est bonne (j’ai fait divers test de réduction augmentation).
  • Le bout de code html avec une balise viewport
  • le bout d’url avec full screen

j’ai Jeedom V4, le design est simple, une image png.

Mon téléphone est un mi a3 où je lance jeedom sur chrome puis fait un raccourci pour ouvrir en plein écran.

Merci
Damien

2

Ca m’intéresse si y’a une solution. J’ai plusieurs design tous de la même taille et certains le font aussi depuis la nvelle app.

3

Salut
Pour ta résolution, tu as mis celle de ton écran (selon les specs du téléphone) ou celle que ce site te donne : http://whatismyscreenresolution.net/

4

J’ai fait du try and check, jusqu’a qu’en mode autofit ca remplisse l’écran (pas de mouvement possible et pas de bande blanche). (je suis parti de la full résolution en largeur et j’ai enlevé en hauteur)
Damien

5

Et est-ce que la résolution que tu as trouvée correspond a celle du site que je t’ai donné ?

6

non, c’est deux fois moins donnée par le site 360 en largeur alors que mon mobile fait 720.

7

Le pire c’est que c’est aléatoire. J’ai 6 designs, résolutions identiques, jamais eu de soucis avant, et maintenant j’en ai qui sont zoomé mais un coup c’est le l’un, je le dezoom, je vais sur un autre qui n’avait pas le soucis juste avant et pouf il est zoomé, etc…

Et d’ailleurs la fermeture du design avec les 2 doigts marche 1 fois sur 4 alors qu’avant çà marchait impec tout le temps. Je sais pas si c’est lié…

8

bonjour résolution design(360x1200) +
viewport +
script viewport

  <meta charset="utf-8">
<meta id="jeedomViewport" name="viewport" content="width=device-width,heigh=device-heigh,user-scalable=0," />

et dans le script

    // jquery
var mvp = $('#jeedomViewport')[0];    
    // js
//var mvp = document.getElementById('jeedomViewport');   
       if (screen.width >= 920) {}
  else {    	

    var scaleX = screen.width / 360;
   mvp.setAttribute('content','initial-scale='+scaleX+'; user-scalable=0;');
   }

edit :

vu que je reçois des mp
pour essai et comprehension
en 1er
on crée un design test de la résolution 360x1200
en 2 on ajjoute un html

<html>
<head>
  <meta charset="utf-8">
<meta id="jeedomViewport" name="viewport" content="width=device-width,heigh=device-heigh,user-scalable=0," /> 

  <script>
        // jquery
var mvp = $('#jeedomViewport')[0];    
    // js
//var mvp = document.getElementById('jeedomViewport');   
       if (screen.width >= 920) {}
  else {    	
    var scaleX = screen.width / 360;
   mvp.setAttribute('content','initial-scale='+scaleX+'; user-scalable=0;');
   }
  </script>

      <style>
/* cache la barre latéral "scroll" sur mobile*/
    @media only screen and (min-width: 300px) and (max-width: 900px){
    html,body {
  overflow-x: hidden; 
   -webkit-overflow-scrolling: touch; /* enables momentum scrolling in iOS overflow elements */
      }
  body::-webkit-scrollbar {display: none; }
      }
  </style>
  
  </head>
</html>
9

çà marche !! Je l’ai mis dans le htmldisplay (plugin) de mon menu pour tout mes designs.

J’ai / 480 (je suis en 480x1237 sur iPhone X)

Par contre on ne peux plus zoomer :grin:
Avec çà on garde la possibilité de zoomer
mvp.setAttribute('content','initial-scale='+scaleX+'; user-scalable=1;');

On ne devrais pas avoir à faire çà malgré tout

@Alexandre ?

EDIT: pour sortir avec les 2 doigts, on dirait qu’il faut que l’écart entre les deux touchs soit d’au moins la moitié de la larguer de l’écran :astonished:

EDIT2: çà ne marche pas à l’ouverture du 1er design. Il est zoomé. Ensuite sur les autres en changant avec le menu c’est bon. J’ai d’ailleurs une coloration de l’icone du menu actif, et çà ne marche pas non plus à l’ouverture du 1er, comme si le js était désactivé :thinking: Même avec un setTimeout() 500 !

10

l’intérêt pour moi je force une resolution
tablette ou tel en mode portrair kif kif
un design de moin

essaie sans le mode plein écran
un cache peut etre

11

Oui c’est pas mal, au moins quand je change de design plus de soucis.
Mais encore une fois, l’app n’avait pas ce soucis avant et rien à changé sur mes designs (ils datents d’au moins 1 an et je n’y touche jamais)

Et pas de soucis sur la webapp

12

et via css ?
@media only screen

1 « J'aime »