web-dev-qa-db-fra.com

Comment désactiver le zoom de la fenêtre d'affichage sur 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 de ces valeurs est recommandée par la recherche Google ou par le SO, mais aucune des valeurs 'user-scalable = X' ne semble fonctionner

J'ai également essayé de délimiter les valeurs par des virgules au lieu du point-virgule, pas de chance. Ensuite, j'ai essayé UNIQUEMENT de présenter la valeur évolutive de l'utilisateur, toujours pas de chance.

UPDATE

Vous l'avez obtenu sur le site d'Apple et cela fonctionne:

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

il s’avère que le problème vient des citations non standard car j’avais copié la balise méta d’un site Web qui les utilisait, whoops

htmliosmobile-safarizoomviewport
350
MetaGuru

Votre code affiche les guillemets des attributs sous forme de guillemets fantaisie. Si les guillemets fantaisie sont présents dans votre code source actuel, je suppose que c'est le problème.

Cela fonctionne pour moi sur Safari mobile dans iOS 4.2.

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

Pour les personnes recherchant une solution iOS 10, user-scaleable=no est désactivé dans Safari pour iOS 10. La raison en est que Apple tente d'améliorer l'accessibilité en permettant aux utilisateurs de zoomer sur des pages Web.

à partir des notes de publication:

Pour améliorer l'accessibilité sur les sites Web dans Safari, les utilisateurs peuvent désormais effectuer un zoom avant, même lorsqu'un site Web définit user-scalable = no dans la fenêtre.

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

144
Mattis

@ mattis est exact qu'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 fait désactiver l'utilisation de preventDefault sur l'événement 'gesturestart'. Je ne l'ai vérifié que sur Safari sous iOS 10.0.2.

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

pour iphones safari jusqu'à iOS 10 "viewport" n'est pas une solution, je n'aime pas cette façon, 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);
15
Arthur
user-scalable=0

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

Il n’ya aucun moyen de désactiver le site Web de zoom sur iOS pour le moment, sauf si vous créez une application de plate-forme brute.

9
angry kiwi

Essayez d'ajouter ce qui suit à votre balise head:

<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, en tant qu'attribut de style ou dans votre fichier css, ajoutez le texte suivant pour les navigateurs Webkit:

html {
    -webkit-text-size-adjust: none
}
9
Lorenz Lo Sauer

Cela fonctionne très 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

5
Nikhil Gowda

parfois, ces autres directives dans le contenu peuvent gâcher votre vue avec la meilleure estimation par Apple de la mise en page de votre page, il vous suffit de désactiver le zoom par pincement.

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

Dans Safari 9.0 et les versions ultérieures, vous pouvez utiliser une réduction de taille dans la balise méta de viewport, comme indiqué ci-dessous.

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

J'ai réussi à arrêter ce problème 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 lorsque vous utilisez la molette de la souris. Ce n'est pas un gros problème sur les navigateurs de bureau, mais il est important de prendre cela en 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;
}
2
imelgrat

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'il ne s'exécutera que dans les environnements iOS (s'il s'exécute dans Android, le défilement sera annulé). Notez également que l’option passive est définie sur false.

1
José Antonio Postigo

J'ai bêtement eu un div wrapper qui avait une largeur mesurée en pixels. Les autres navigateurs semblaient assez intelligents pour gérer cela. Une fois la largeur convertie en valeur en pourcentage, cela fonctionnait également sous Safari mobile. Très ennuyant.

.page{width: 960px;}

à

.page{width:93.75%}

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

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

0
haltersweb