Bonjour,
Je confond rien.
J'avais rédigé cette nuit un complément plus détaillé, mais un incident de frappe et tout à disparu (retour à version d'origine, sauvegarde disparue), je suis allé me coucher à 7h du mat.
Pour répondre aux questions directes :
1- Même si je comprend et modifie s'il y a lieu l'architecture générale du site, c'est WordPress (4.6.5) complété de mon theme, plugins, plugins étendus et patchs), je n'ai pas tout réécrit.
2- les minima requis :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ne figure pas (jamais vérifié), mais :
<meta name="viewport" content="width=device-width">
J'ai modifié le theme pour vérifier l'effet de "initial-scale=1.0"
L'effet est que les innerSizes ne seront pas modifiés et bien calés sur initial-scale=1.0.
Par contre le problème signalé pour les éléments fixés en right:0; demeurent avec une "erreur de calcul".
On trouve ainsi (nota : les valeurs calculées sont suivies de "=" assignées par style ":" '->' dépendance d'éléments)
#page width = 360px; ->
#main width = 360px; ->
#tabs position: fixed; right: 5px; width:38px; Valeurs calculées : right:5px; left = 634px;
Le navigateur s'évertue à positionner les éléments fixés par "right" (avec Chrome, différent avec Firefox) avec un bord droit virtuel a 634+5+38 = 677px;
A noter : Valeur précédemment affectée à innerWidth quand initial-scale !=1.0
A noter que dans le cas où initial-scale n'est pas défini du tout et que alors innerWidth devient = 677px, alors on trouve pour l'élément #tabs left = 634px;
Le initial-scale n'a qu'un seul effet, l'affichage d'origine. Le zoom a deux doigts remet les choses dans l'état identique au cas précédent, à l'exception que window.innerWidth qui traduit la valeur de Zoom courant qui en Zoom maximum prend la valeur 677px;
Le problème provient de plusieurs faits essentiels qui différencient les deux cas cités :
- innerWidth (et Height) dépendent de initial-scale qui par défaut prenait la valeur maximale dès l'initialisation (lancement de mon script js) dans les deux cas (voir note 1). Par contre les deux cas rencontrés ne sont pas équivalents parce que avec la production de pages et articles il n'y a pas de zoom possible (explication ?) et le calcul du positionnement d'éléments est correct alors que lors de la production des listes d'objets le zoom est actif (677/360 max)
- les éléments fixed-right sont positionnés par Chrome calés sur la droite du cadre "innerWidth" maximal : 677px; Je ne trouve pas d'écrit qui explique que les éléments "fixed" avec "right:<value>" sont positionnés par rapport au viewport maximal.
- Sur les PC le resize fixe le viewport et les éléments fixes suivent le bord droit de fenêtre (sauf cas de scroll), par contre il semble que sur mobile le problème soit plus délicat. C'est peut-être là le problème.
En complément :
- Je sais pas ce qui conduit Chrome à fixer le inner sur le Zoom max et quand (voir le changer après orientation-change). Ceci étant inner change avec le Zoom a deux doigts, mais pas le positionnement d'éléments fixed
- Je ne retrouve pas l'origine de la valeur de 677px qui correspond à un Zoom de 677/360 = 1.880 ou 1/x = 360/677 = 0.5317 %
- Autre constat : Les fonctions calc sur la largeur et qui utilisent "xx%" partent non de "100%" = largeur de l'élément parent (mécanisme d'héritage des dimensions exprimées en %) mais de innerWidth max.
A titre d'information lorsque je cherche à positionner mes éléments fixes en utilisant "calc" :
- Si la largeur totale innerwidth maximale = 677px;
- Si l'élément est positionné par : left: calc( 100% - 38px); les résultats seront : left = 322px (OK 360 - 38) mais right = -317px et est cadré sur la marge de droite à 677px;
Où est-il écrit que en HTML et css3 les positions fixes sont calculées par rapport au viewport
C'est donc un bug majeur pour moi évident de chrome (prouvé de fait par l'existence d'une incohérence des valeurs calculées, après pour les conséquences tout est possible). Ceci d'autant plus que pour sa part Firefox se comporte de manière différente mais encore plus erratique.
En tout état de cause la question est pour mon site : qu'est-ce-qui fait que pour l'état concerné le zoom est accepté et basé sur les valeurs que j'indique, je n'en est aucune idée.
Le problème peut-être général, mais si le zoom est bloqué (i.e. paramètre maximum-scale=1.0), alors le problème n'a peut-être plus lieu.
Quant au "queries" il y en a 13 pour screen.
Prend en charge des écrans PC de > 1900px jusqu'à 450px (présentation d'articles en une colonne)
Prend en charge divers mobiles (avec cas de résolutions différentes) testé sur Samsung Galaxy S7, Samsung I9060I, Samsung I90160I (S2), LG G4, Tablette LG V500.
Mais comme le test n'avaient pas été faits spécifiquement pour les listes d'objets, je tombe sur le problème sans comprendre complètement pour l'instant.
Donc pour la suite, je compare les deux documents, même scripts et css, mais pas exactement le même contenu pour identifier pourquoi le zoom devient actif.
( Pour information la différence apparaît dans body au troisième niveau de div ou dans le cas où innerWidth change de valeur (de 360px à 647px) on produit (WordPress) une liste de documents au lieu d'afficher le contenu d'un article.
Le but est d'identifier le mécanisme (déja avec Chrome).
Je travaille par comparaison.
Il sera peut-être possible de le contourner.
Cordialement
Trebly
_________________________________________________________________________________________________________________________
note 1 : mon script principal gère pour les changements d'orientation et les resizes un objet qui conserve et permet de comparer (état précédent-suivant) la plupart des paramètres qui caractérisent le périphérique.
L'objet est initialisé dès les premières instructions du script.
Les valeurs rapportées sont :
originOffsetY innerWidth innerHeight outerWidth outerHeight JQ :window.width() JQ :window.height()
Accueil (article simple) 320 360 560 360 560 360 560
W4pl (liste) 320 677 1054 360 560 360 560
___________________________________________________________________________________________________________________________
Note 2 : Le site comprend entre autres :
- des volets latéraux avec chargement ajax,
- le réglage de taille de polices et de divers paramètres d'affichage (adaptation fine au périphérique),
- la gestion d'options utilisateur sauvegardée sur ses différents périphériques,
- la gestion de marque pages,
- historique de navigation avec le header ou le texte marqué comme grain
- gestion de documents multipages (plusieurs url pour un même "document" et de textes longs avec sommaires, bibliographies, index etc..
Partager