Comment désactiver le zoom de fenêtre dans Mobile Safari?

J'ai essayé les trois en vain:

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” />

chacune est des valeurs différentes que j'ai trouvées recommandées par la recherche google ou la recherche SO, mais aucune des valeurs ' user-scalable = X ' ne semble fonctionner

J'ai également essayé la virgule délimitant les valeurs au lieu du point-virgule, pas de chance. Ensuite, j'ai essayé SEULEMENT d'avoir la user-scalablevaleur présente, toujours pas de chance.

MISE À JOUR

Je l'ai sur le site d'Apple et ça marche:

<meta name="viewport" content="width=device-width, user-scalable=no" />

il s'avère que le problème était les citations non standard parce que j'avais copié la balise meta d'un site Web qui les utilisait, whoops

Votre code affiche des guillemets doubles d'attribut comme des guillemets doubles fantaisie. Si les citations fantaisistes sont présentes dans votre code source réel, je suppose que c'est le problème.

Cela fonctionne pour moi sur Mobile Safari dans iOS 4.2.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Pour les personnes à la recherche d'une solution iOS 10, user-scaleable=noest désactivé dans Safari pour iOS 10. La raison en est qu'Apple essaie d'améliorer l'accessibilité en permettant aux gens de zoomer sur les pages Web.

Des notes de version :

Pour améliorer l'accessibilité sur les sites Web dans Safari, les utilisateurs peuvent désormais pincer pour zoomer même lorsqu'un site Web définit l'utilisateur évolutif = non dans la fenêtre.

Donc, pour autant que je comprends, nous n'avons pas de chance.

@mattis a raison: iOS 10 Safari ne vous permettra pas de désactiver le pincement pour zoomer avec l'attribut évolutif de l'utilisateur. Cependant, je l'ai obtenu pour désactiver l'utilisation de preventDefault sur l'événement 'gesturestart'. Je n'ai vérifié cela que sur Safari dans iOS 10.0.2.

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

pour iphones safari jusqu'à iOS 10 "viewport" n'est pas une solution, je n'aime pas ça, mais j'ai utilisé ce code javascript et cela m'a aidé

 document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
      event.preventDefault();
    }
  }, false);

user-scalable=0

Cela ne fonctionne plus sur iOS 10. Apple a supprimé la fonctionnalité.

Il n'y a aucun moyen de désactiver le zoom du site Web sur iOS maintenant, sauf si vous créez une application de plateforme brute.

Essayez d'ajouter ce qui suit à votre head-tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

aditionellement

<meta name="HandheldFriendly" content="true">

Enfin, soit en tant qu'attribut de style, soit dans votre fichier css, ajoutez le texte suivant pour les navigateurs Webkit:

html {
    -webkit-text-size-adjust: none
}

Je l'ai fait fonctionner dans iOS 12 avec le code suivant:

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

Avec la première instruction if, je m'assure qu'elle ne s'exécutera que dans les environnements iOS (si elle s'exécute dans Android, le comportement du défilement sera rompu). Notez également l' passiveoption définie sur false.

Cela fonctionne bien dans IOS 10.3.2

    document.addEventListener('touchmove', function(event) {
        event = event.originalEvent || event;
        if (event.scale !== 1) {
           event.preventDefault();
        }
    }, false);

merci @arthur et @aleclarson

J'ai réussi à arrêter ce comportement en ajoutant ce qui suit à l'en-tête HTML. Cela fonctionne sur les appareils mobiles, car les navigateurs de bureau prennent en charge le zoom lors de l'utilisation de la molette de la souris. Ce n'est pas un gros problème sur les navigateurs de bureau, mais il est important d'en tenir compte.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

et la règle suivante à la feuille de style CSS

html {
	-webkit-text-size-adjust: none;
	touch-action: manipulation;
}

Parfois, ces autres directives dans la contentbalise peuvent gâcher la meilleure supposition / heuristique d'Apple sur la façon de mettre en page votre page, tout ce dont vous avez besoin pour désactiver le zoom pincé est.

<meta name="viewport" content="user-scalable=no" />

Dans Safari 9.0 et versions ultérieures, vous pouvez utiliser la balise Meta rétrécie pour s'adapter à la fenêtre, comme indiqué ci-dessous

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

J'ai bêtement eu un div wrapper qui avait une largeur mesurée en pixels. Les autres navigateurs semblaient être assez intelligents pour gérer cela. Une fois que j'ai converti la largeur en pourcentage, cela a bien fonctionné sur Safari mobile également. Très ennuyant.

.page{width: 960px;}

à

.page{width:93.75%}

<div id="divPage" class="page">
</div>

L'utilisation de la touch-actionpropriété CSS est la solution la plus élégante. Testé sur iOS 13.5.

Pour désactiver les mouvements de zoom par pincement et appuyez deux fois pour zoomer:

body {
  touch-action: pan-x pan-y;
}

Si votre application n'a pas non plus besoin de panoramique , c'est-à-dire de défilement, utilisez ceci:

body {
  touch-action: none;
}

Afin de se conformer aux exigences d'accessibilité WAI WCAG 2.0 AA, vous ne devez jamais désactiver le zoom par pincement. (WCAG 2.0: SC 1.4.4 Redimensionner le texte de niveau AA). Vous pouvez en savoir plus à ce sujet ici: Accessibilité mobile: Comment WCAG 2.0 et autres directives W3C / WAI s'appliquent à Mobile, 2.2 Zoom / Grossissement

Celui-ci devrait fonctionner sur l'iphone, etc.

<meta name="viewport" content="width=device-width, initial-scale=1 initial-scale=1.0, maximum-scale=1.0, user-scalable=no">