Activé le zoom | [user-scalable="no"]est utilisé dans l' <meta name="viewport">

[dorianrevest]

Bonjour,

Je suis sous PS 1.6.1.24 sous le theme zro.

En passant mon site sous Lighthouse, je m'aperçois que le zoom est désactivé et Google me recommande de l'activé.

Je vais dans le header.tpl et je modifie mon code d'origine qui est : <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1.0" />

 

Par celui-ci : <meta name="viewport" content="width=device-width, initial-scale=1"  /> après plusieurs test avec d'autre modification, rien ne ce passe. J'ai le [user-scalable="no"], peut être le mettre sur yes mais introuvable.

 

Une piste ?

Merci ! :)

[Remy FRK Corp]

Bonjour

14 hours ago, dorianrevest said:

[user-scalable="no"], peut être le mettre sur yes mais introuvable.

Une piste ?

"peut être le mettre"

[dorianrevest]

Bonjour,

Oui plutôt le mettre sur Yes mais je sais pas ou le trouver. 

[Remy FRK Corp]

oui si vous voulez, mettez le.

[dorianrevest]

Je sais pas ou le trouver. 

[Remy FRK Corp]

Si vous ne le trouvez pas, peut être n'y est il pas ?

[Remy FRK Corp]

d’où l'idée..."peut être l'y mettre"

[dorianrevest]

Je ne suis pas là pour jouer aux devinettes, mais trouver une réponse à mon problème.

Après différentes recherches et test sur le sujet rien est abouti. Ce topic aidera plusieurs personnes dans mon cas si vous donnez une réponse à la problématique et non un QCM ça serait formidable.

[Remy FRK Corp]

Si dans votre balise meta, vous n'avez pas de user-scalable="yes" mettez l'y vous mème dedans^^

en suivant les règles d'usages :

https://web.dev/meta-viewport/

https://stackoverflow.com/questions/22354435/to-user-scalable-no-or-not-to-user-scalable-no

https://forum.alsacreations.com/topic-27-72055-1-Resolu-quotuser-scalablenoquot-vs-quotuser-scalableyesquot.html

...

C'est pas un QCM, non.

Edited April 10, 2021 by Remy FRK Corp (see edit history)

[dorianrevest]

Merci de votre réponse.

J'avais déjà fait un test avec le second lien en copiant/collant "<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=4.0,user-scalable=yes">" mais pas changement. J'ai pris soin de vider le cache et de le voir apparaitre en inspectant la page. Lighthouse m'envoi toujours l'erreur : 

Failing Elements

meta

<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=0,width=device-width,hei…">

 

 

[Remy FRK Corp]

Vous pouvez retirer le maximum scale et pas mettre de user-scalable aussi.

[dorianrevest]

J'ai effectué votre modification et celle-ci : 

1 : <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0">

2 : <meta name="viewport" content="initial-scale=1.0">

Mais toujours pas de zoom, et l'erreur auprès de lighthouse.

En regardant sur un thème prestashop du marketplace on a bien ce type de code : <meta name="viewport" content="initial-scale=1.0"> mais ca fonctionne pas.

[Remy FRK Corp]

et en mettant le maximum scale à 5 ?

[dorianrevest]

Malheureusement toujours pareil

[Remy FRK Corp]

vous pouvez envoyer l'url de votre site ?

Edited April 10, 2021 by Remy FRK Corp (see edit history)

[dorianrevest]

Oui : https://inklandtattoo.fr/ 

merci !

[Remy FRK Corp]

Là quand je passe votre site sous LightHouse, il ne me parle pas de votre zoom.

 

[dorianrevest]

Voici une capture d'écran.

[Remy FRK Corp]

effecivement, Il sort ca que pour la version mobile.

en desktop il en parle pas...

Vous avez pas un module lié à l'affichage qui pourrait jouer la dessus ?

[Remy FRK Corp]

Je viens de testé sur d'autres site en 1.6xx et principalement des 1.6.1.24  c'est à peu près pareil.

Donc est-ce vraiment ce qui va faire une grande différence ?

 

 

 

( les sites que j'ai testés crachent tous un LH  Mobile :

Best practicesThese items highlight common accessibility best practices.

[user-scalable="no"] is used in the <meta name="viewport"> element or the [maximum-scale] attribute is less than 5. )

Edited April 10, 2021 by Remy FRK Corp (see edit history)

[dorianrevest]

Merci pour la recherche ! 

Je pensais que c'était lié seulement au thème.. Donc compliqué d'y remédier si je comprends bien ?

[Remy FRK Corp]

Je saurais pas dire exactement, mais en gros j'ai pris une demi douzaines de site en 1.6 (que des sites de développeurs pro présents sur le forum). Tout le monde pareil...

les quelques 1.6 qui on pas eut le warn je les soupçonnes de pas ètre en 1.24

Je n'ai pas cru voir ca sur du 1.7 (j'ai testé sur 3/4 boutiques) RAS.

 

 

Edited April 10, 2021 by Remy FRK Corp (see edit history)

[dorianrevest]

Merci Remy pour le temps passé sur ma question. 👍

C'est un petit détail mais je voulais pouvoir optimisé ma boutique au maximum.

[Remy FRK Corp]

de rien

Après on auras peut être la visite de quelqu'un qui à la réponse, je serais curieux de savoir pourquoi un tel résultat.

 

[Remy FRK Corp]

attend

Je viens de voir un truc ...

dansle global.js de ton theme

[Remy FRK Corp]

T'as pas un ca :

var responsiveflag = false;

$(document).ready(function(){
	highdpiInit();
	responsiveResize();
	$(window).resize(responsiveResize);
	if (navigator.userAgent.match(/Android/i))
	{
		var viewport = document.querySelector('meta[name="viewport"]');
		viewport.setAttribute('content', 'initial-scale=1.0,maximum-scale=1.0,user-scalable=0,width=device-width,height=device-height');
		window.scrollTo(0, 1);
	}

 

[Remy FRK Corp]

Supprime:

		var viewport = document.querySelector('meta[name="viewport"]');
		viewport.setAttribute('content', 'initial-scale=1.0,maximum-scale=1.0,user-scalable=0,width=device-width,height=device-height');

 

(duplique ton fichier avant de le modifier au cas ou)

[dorianrevest]

Je viens de le faire mais pas de changement ( est fait sur mon tel et LH).

[Remy FRK Corp]

zut.

Bon...le mystère reste entier

tu as bien vidé tes caches ?

Edited April 10, 2021 by Remy FRK Corp (see edit history)

[dorianrevest]

Merci quand même !

[Remy FRK Corp]

essai quand mème en vidant bien tout tes caches et cookies boutique et navigateurs.

[dorianrevest]

Je n'avais pas vidé le cache du navigateur 😅.

Merci beaucoup !

Je rajouterais pour juste l'accès au dossier js : /votresite/themes/nomdutheme/js

[Remy FRK Corp]

Super, maintenant on sait !

[malawimbunas]

Bonjour,

 

Merci pour ce sujet qui m'a permis aussi de résoudre le problème.

Par contre, je n'ai pas supprimé les lignes comme vous, mais simplement changé les valeurs comme suit:

    var viewport = document.querySelector('meta[name="viewport"]');
        viewport.setAttribute('content', 'initial-scale=1.0,maximum-scale=6.0,user-scalable=5,width=device-width,height=device-height');