Bonjour,
je finalises mon entête pour HTML5
mais les avis divergent sur le viewport
Faut'il utiliser:

<meta name="viewport" content="width=device-width, initial-scale=1" />

OU

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Merci pour votre avis
Bonjour,

oui, et si tu lances des recherches sur le net, tu vas devenir fou, tant les avis divergent, comme tu le dis. Il y a quand même quelques règles incontournables, il me semble :

- content="width=device-width"

- initial-scale=1.0 (La propriété initial-scale spécifie l'échelle de la fenêtre (zoom). La propriété initial-scale accepte comme valeur un nombre compris entre > 0.0 et 10.0. la valeur multipliée par width ou height;)


Pour ce qui est de "shrink-to-fit=no", c'est à voir. Un lien ici : https://bitsofco.de/ios-safari-and-shrink-to-fit/
Enfin, j'ai aussi ajouté "user-scalable=yes" dans mon meta name="viewport. Sur le net, tu trouveras des arguments solides pour mettre "no" à user-scalable. Des personnes qui disent que permettre de "zoomer" une page n'a pas de sens, que la page ne ressemble plus à rien et que ça oblige en plus à se déplacer latéralement et verticalement (sur un smartphone) pour lire le texte, ce qui est vrai. Ils conseillent plutôt de s'acheter de bonnes lunettes ! Alors que la majorité dit qu'il faut absolument permettre le zoom... J'ai suivi la majorité et mis "yes".

Ma conclusion, c'est que :
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes>

fonctionne bien.
Bon courage.
Modifié par Bongota (10 Oct 2019 - 13:48)
Administrateur
Hello,

Le paramètre "shrink-to-fit" n'est plus reconnu par Apple depuis quelques versions. Il est donc inutile aujourd'hui : https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html

Et si tu veux opter pour la valeur choisie chez Alsacréations, c'est ici que ça se passe : https://www.alsacreations.com/article/lire/1490-Comprendre-le-Viewport-dans-le-Web-mobile.html

<meta name="viewport" content="width=device-width, initial-scale=1.0">


"user-scalable=yes" est inutile puisque c'est la valeur par défaut.
Modifié par Raphael (10 Oct 2019 - 15:15)
Meilleure solution
Mille mercis à vous deux,
Je ne vais donc pas me compliquer la vie ,et depuis que je suis ici (même avant sous un autre pseudo Smiley cligne ) je n'ais jamais trouvé de forum plus fiable,allant au fond des choses.
Alors je copie traitreusement sur vous, comme tu le dis, donc j'opte pour:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

mille mercis et A++
Houp's j'avais mis résolu mais j'abuse pour terminer, j'ai aussi ces instructions, dans mon head, est-ce toujours utile ?

<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->

Merci encore Smiley cligne
Bonjour,
bonne question, parce que je me questionne aussi sur cette balise concernant IE-edge. J'attends avec impatience la réponse.... de Rapael Smiley cligne Que je remercie au passage pour ses précisions au sujet de la balise meta viewport. Dans ma réponse, je n'avais pas donné le lien d'Alsacreations pour cette balise, considérant qu'un utilisateur de ce forum le connaissait sans doute.
Administrateur
Bonjour,

dans un commentaire conditionnel, cela signifie que seuls IE6-IE9 inclus vont exécuter cette directive (et, détail, une directive que seuls IE8 et IE9 vont comprendre).
IE10 et 11 ne reconnaiss(ai)ent plus les commentaires conditionnels.
EDIT : les CC sont reconnus par IE6-IE9. Cette meta est reconnue par IE8-IE11.

En enlevant le CC et ne gardant que l'élément meta pour tous les navigateurs donc, est-ce que forcer ce mode pour IE11 est utile ?
Il faut regarder les stats de visite : si aucun utilisateur n'a ce navigateur, bon débarras.
Si le site n'a pas été testé depuis 2 ans avec ce navigateur, bah de toute façon ça va mal s'afficher alors bon débarras bis.
Pour trouver un visiteur qui 1/ utilise IE 2/ active par erreur ce mode, je pense que c'est assez rare Smiley lol Et il faut ajouter 3/ ça ne s'affiche pas pareil sur IE11 et "IE11-en-mode-IE-plus-vieux". Hum.
Modifié par Felipe (10 Oct 2019 - 18:48)