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


393

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


6
Si vous créez un jeu, le contrôle du zoom est peut-être valide. Cependant, dans presque tous les autres cas, il devrait être fortement déconseillé. Malheureusement, c'est devenu une pratique courante pour de nombreux développeurs mobiles. Si un utilisateur veut zoomer pour pouvoir lire du texte plus facilement, etc., l'empêcher de le faire n'est pas très agréable.
user2268788

72
Nous désactivons le zoom sur une application Web mobile. Vous ne pouvez pas zoomer sur les applications iOS natives et ce n'est pas obligatoire dans notre application Web. Si votre site ou application est optimisé pour les mobiles, vos utilisateurs n'auront pas besoin de zoomer. Il existe toujours des cas d'utilisation pour désactiver le zoom. Cela ne doit pas toujours être dans un sens ou dans l'autre.
Bradley Flood

10
Oui, je ne suis pas dans la logique selon laquelle la désactivation du zoom sur un site optimisé pour mobile est une mauvaise chose . Ce qui est bien pire, c'est que la fenêtre se déplace accidentellement, car l'écran détecte les entrées de panoramique et de zoom accidentelles sur un site qui ne vous oblige pas à zoomer de toute façon. De manière réaliste, si vos utilisateurs ont besoin de zoomer sur le contenu de votre site optimisé pour mobile, le problème est la conception, pas le manque de zoom.
Nathan Hornby

3
@NathanHornby: Le problème de la désactivation du zoom est un manque de respect des préférences de l'utilisateur. Différents utilisateurs préfèrent des tailles de texte différentes, un public plus jeune avec une bonne vue pourrait préférer voir plus de contenu, tandis qu'un public avec une mauvaise vue ne peut pas utiliser quelque chose qui n'a pas de texte géant. D'autres personnes ont des Parkins mais ont toujours une bonne vue, elles préfèrent donc les boutons extra larges mais ne bénéficient pas du texte en gros.
Lie Ryan

4
@NathanHornby Cela ne signifie pas nécessairement que le concepteur a fait quelque chose de mal. Cela signifie simplement que l'utilisateur, pour une raison quelconque, souhaite effectuer un zoom avant. Le pincement-zoom est une fonctionnalité standard de tous les téléphones à écran tactile. Tout utilisateur qui possède un tel téléphone sait comment l'utiliser. Je sais que c'est une vieille question, mais je suis toujours constamment frustré par les développeurs avertis qui insistent pour briser les fonctionnalités de mon téléphone parce qu'ils pensent que cela rend leurs conceptions plus belles.
user1751825

Réponses:


719

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" />

12
c'était les citations fantaisistes, j'avais copié la balise d'un site Web sans s'en rendre compte, merci de l'avoir signalé!
MetaGuru

5
C'est peut-être à long terme ici, mais il pourrait être utile de souligner que cela doit être appliqué à la page "de niveau supérieur". Si vous avez cette balise Meta appliquée à un iframe, cela ne fonctionnera que si la balise Meta est également appliquée à la page la plus élevée.
founddrama

2
Pourquoi quelqu'un créerait-il un logiciel qui crée des citations fantaisistes me dépasse?
Traubenfuchs

3
@Traubenfuchs: Typographie.
BoltClock

3
Ceci est une réponse assez ancienne et en arrivant au problème, j'avais lu que si vous définissez scalable par l'utilisateur sur non, cela entraînerait des problèmes d'accessibilité. Depuis iOS 10, cela fonctionne très bien, permettant à l'utilisateur de zoomer s'il le souhaite, mais pas de zoomer la zone de saisie sinon. Pas besoin non plus de définir de grandes tailles de police.
David

161

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.


6
Quelle terrible décision d'Apple. L'utilisation d'une double flèche avec les boutons "-" et "+" pour décrémenter / incrémenter un nombre fait maintenant un zoom à plusieurs reprises sur la page dans et hors iOS iOS Safari. Les presses sont interprétées comme une double pression pour zoomer, sans aucun moyen de désactiver cela. iOS Chrome fonctionne parfaitement. Frustrant.
Paul

5
Bien que je sois foutu de cette décision, mais je suis vraiment heureux d'Apple en tant qu'utilisateur, car je voulais forcer cette fonctionnalité dans de nombreux sites Web qui utilisaient de petits éléments à l'intérieur.
Bishoy Hanna

10
le monde va en enfer
petit homme minuscule

2
Oh mon Dieu, qui aurait deviné? Un autre choix ridicule fait par Apple
Emil Pedersen

3
Laissez-le à Apple de forcer une "fonctionnalité" d'accessibilité sur tout le monde au lieu de simplement ajouter une option pour cela dans les paramètres d' accessibilité ...
Lennholm

99

@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();
});

8
Sur iOS 10, j'ai trouvé que cela fonctionnait, mais si vous faites défiler la page puis pincez-zoomez tout en faisant défiler, cela permet le zoom. Vous vous retrouvez alors bloqué au nouveau niveau de zoom jusqu'à ce que vous fassiez défiler à nouveau. Cela ne ressemble donc pas à une bonne solution à moins que le corps de votre page ne défile pas. :(
Rand Scullard

1
Une mise en garde: l'utilisateur peut toujours appuyer deux fois sur l'écran qui va / peut zoomer et n'est pas attrapé par cela.
Stephen

1
Permet toujours parfois de zoomer en appuyant deux fois sur l'écran. :(
Jarzka

4
À quoi équivaut le «double tap» gesturestart? dblclick ?
lowtechsun

3
Une autre remarque, si vous souhaitez désactiver l'aspect double tap du zoom. Mobile Safari prend également en charge «l'action tactile: manipulation» (relève de la «prise en charge de base», qui désactive les événements de double tap. Documentation ici: developer.mozilla.org/en-US/docs/Web/CSS/touch-action
jeremypress

15

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);

3
Il devrait êtreevent.scale !== 1
aleclarson

@aleclarson event.scale> 1 include condition event.scale! == 1
Arthur Tsidkilov

@aleclarson pour empêcher le zoom sur Mobile Safari, il suffit, j'ai écrit que je n'aime pas cette façon, normalement pour qu'il soit utilisé dans la fenêtre d'affichage, mais sur IOS iphone 6 et supérieur, cela ne fonctionne pas (je pense que votre événement. ! == 1 devrait être plus correct, mais tout cela n'est pas correct, c'est une sorte de piratage)
Arthur Tsidkilov

@aleclarson Semble utiliser! == brise le navigateur natif dans Android 4.4; event.scale n'est pas défini.
James Pizzurro

3
@JamesPizzurro Oui, vous pouvez utiliserevent.scale !== undefined && event.scale !== 1
aleclarson

11
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.


Une telle déception ... Une idée pourquoi ils ont enlevé ça?
Stephen Tetreault

3
@smt, ils ne veulent pas que l'expérience Web soit en concurrence avec l'expérience de l'application sur l'App Store.
Marvin Danig

2
@marvindanig oui ... car ils coûtent 99 $ pour produire une application qui pourrait facilement devenir une application de page Web plus accessible pour toutes les plateformes. De même, Apple ne peut pas aimer une «expérience Web», si cela signifie que les utilisateurs et les développeurs peuvent éviter le jardin clos. Tout tourne autour du pouvoir et de l'argent d'Apple :(
humanANDpeace

Il est en fait possible de faire fonctionner cela sur les nouvelles versions d'iOS. Voir ma réponse: stackoverflow.com/a/62165035
Feross

7

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
}

Ne fonctionne pas sur les nouvelles versions d'iOS
Feross

7

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.


Ne fonctionne pas sur mon iOS 12.3.1, voici le lien de test: https://output.jsbin.com/liqiraj
Jess

4

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


iOS 13 change false en {passif: false}
wayofthefuture

4

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;
}


Ne fonctionne pas sur les nouvelles versions d'iOS
Feross

3

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" />

Ne fonctionne pas sur les nouvelles versions d'iOS
Feross

2

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">

Ne fonctionne pas sur les nouvelles versions d'iOS
Feross

0

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>

0

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;
}

-3

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


13
Ce n'est pas une réponse .. et de nombreux clients demandent encore de bloquer le zoom .. donc je ne peux pas prendre cela comme une règle générale

9
Le zoom d'accessibilité n'est pas la responsabilité de la page (ni aucune application d'ailleurs). Il est de la responsabilité du système d'exploitation de fournir un outil de zoom accessible. Aujourd'hui, chaque système d'exploitation fournit une telle fonctionnalité, qui s'applique comme un zoom d'écran , et elle ne devrait pas interférer avec le zoom de la page elle-même, car elle n'est pas destinée à l'accessibilité.
Bruno Finger

4
Il y a toujours des cas d'utilisation valides pour des trucs comme ça. Pour une raison quelconque, presque toute la littérature Web semble supposer que le Web est uniquement destiné à la création de blogs. Tout comme il existe des cas d'utilisation valides pour JavaScript eval(), il en est de même pour désactiver le zoom. Je l'utilise pour une application Web qui est utilisée en combinaison avec un scanner Bluetooth, pour empêcher le zoom de la page lorsqu'un code-barres est numérisé.
user128216

3
Je suis entièrement d'accord avec les objectifs des recommandations d'accessibilité, mais il ne fait aucun doute qu'il y a des moments où le zoom n'est pas souhaité ou nécessaire, ou peut même briser l'expérience utilisateur. De plus, vous savez, les clients.
Chuck Le Butt du

2
Je dirais que dans une application html / javascript, ces directives ne s'appliquent pas. Après tout, une application native vous permettrait-elle de faire un zoom avant ou arrière?
Jörgen Sigvardsson

-5

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">
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.