Comment «désactiver» le zoom sur une page Web mobile?

316

Je crée une page Web mobile qui est essentiellement une grande forme avec plusieurs entrées de texte.

Cependant (au moins sur mon téléphone portable Android), chaque fois que je clique sur une entrée, la page entière y zoome, obscurcissant le reste de la page. Existe-t-il une commande HTML ou CSS pour désactiver ce type de zoom sur les pages Web moble?

html css mobile Martín Fixman
la source
3
Comme Greg l'a dit ci-dessus, si j'entre sur un site Web mobile qui désactive le zoom, la première chose que je fais habituellement est d'appuyer sur le bouton de retour (sauf si c'est quelque chose que je dois vraiment voir), et je suis sûr que je ne suis pas le seul . De plus, d'après mon expérience, la plupart des sites Web dont le zoom est désactivé utilisent également de petites polices, ce qui rend la lecture du texte difficile et très inconfortable.
tomasz86
8
Je conviens qu'il ne devrait pas être désactivé pour la plupart des sites, mais il existe des cas d'utilisation où vous pouvez désactiver le zoom par défaut - tels que les jeux Web mobiles où vous pouvez remplacer le zoom pour faire autre chose.
Luke
11
Vous ne le faites pas - Si les utilisateurs veulent zoomer, laissez-les le faire. En outre: Chrome a une option pour ignorer simplement votre demande.
Martin
2
Pour les utilisateurs d'Android Firefox, il existe le module complémentaire Always Zoom for Firefox . Hautement recommandé.
Colin D Bennett
2
Depuis iOS 10 , user-scalable=noest ignoré. Voir ceci
Raptor

Réponses:

443

Cela devrait être tout ce dont vous avez besoin 

<meta 
     name='viewport' 
     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' 
/>
kgutteridge
la source
23
cela désactive également la capacité de l'utilisateur à zoomer en général, ainsi que la capacité du navigateur à ajuster automatiquement la façon dont la page s'insère dans la fenêtre - tout ce que Martin cherche est un moyen de désactiver le `` zoom sur le clic d'entrée '' comportement.
matt lohkamp
3
En ce moment, quelqu'un chez Posterous a fait exactement cela, tout en ayant la police à 12px, donc c'est illisible et je ne peux pas trouver un moyen de le contourner.
Emil Ivanov
41
Chaque personne malvoyante, y compris moi-même, déteste cela plus que tout. Je dois prendre des captures d'écran des pages qui le font, puis les zoomer dans la visionneuse d'images.
Jack Marchetti
6
Que fait la deuxième balise META? N'est-ce pas width=device-widthdéjà dans la première balise META?
Luke
1
cela ne semble pas fonctionner sur iOS 7. Voir la réponse de
lukad03
159

Pour ceux d'entre vous en retard à la fête, la réponse de kgutteridge ne fonctionne pas pour moi et la réponse de Benny Neugebauer comprend la densité de densité cible (une fonctionnalité qui est obsolète ).

Cela fonctionne cependant pour moi: 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Luke Keller
la source
7
C'est la bonne réponse maintenant. Les autres réponses ne fonctionnent plus (au moins pour iOS 7).
KyleFarris
7
Quelqu'un a essayé cela sur iOS 10.x Je ne pense pas que cela fonctionne?
JMac
Ça ne marche pas pour moi. Il a redimensionné tout l'écran avec une barre de défilement et un mauvais zoom.
Cocorico
1
Ne fonctionne toujours pas sur Safari / iOS 11 en raison du problème SFB chez Apple.
15ee8f99-57ff-4f92-890c-b56153
52

Il existe un certain nombre d'approches ici - et bien que la position soit que généralement les utilisateurs ne devraient pas être restreints en ce qui concerne le zoom à des fins d'accessibilité, il peut y avoir des cas où cela est nécessaire:

Rendez la page à la largeur de l'appareil, ne mettez pas à l'échelle:

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

Empêchez la mise à l'échelle et empêchez l'utilisateur de zoomer:

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

Suppression de tout zoom, de toute mise à l'échelle

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
SW4
la source
"En règle générale, les utilisateurs ne devraient pas être limités", mais lors du développement d'applications Web pour mobile, vous devez souvent faire face au "zom-in sur le focus d'entrée". Je trouve utile de désactiver le zoom dans ce cas.
Le 'nton
@ Le'nton désactiver le zoom sur toute la page n'est pas un bon moyen de gérer le zoom avant sur la mise au point d'entrée. Sur iOS au moins, le zoom de mise au point d'entrée peut être désactivé en augmentant la taille de la police de l'entrée.
pfg
39

Vous pouvez utiliser:

<head>
  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
  ...
</head>

Mais veuillez noter qu'avec Android 4.4, la propriété target-densitydpi n'est plus prise en charge . Par conséquent, pour Android 4.4 et versions ultérieures, les suggestions suivantes sont recommandées:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
Benny Neugebauer
la source
35

Puisqu'il n'y a toujours pas de solution pour le problème initial, voici mon pur CSS deux cents.

Les navigateurs mobiles (la plupart d'entre eux) nécessitent une taille de police dans les entrées de 16 pixels. Alors

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  font-size: 16px;
}
Développer l'extrait

résout le problème. Vous n'avez donc pas besoin de désactiver le zoom et les fonctionnalités d'accessibilité lâches de votre site.

Si la taille de police de base n'est pas de 16 pixels ou de 16 pixels sur les mobiles, vous pouvez utiliser les requêtes multimédias.

@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"] {
    font-size: 16px;
  }
}
Développer l'extrait

Azamat Rasulov
la source
2
Pourquoi cette solution a-t-elle si peu de votes? C'est de loin le meilleur moyen d'éviter le zoom par clic.
KlausCPH
1
Oui; cela a également résolu mon problème! Je ne voulais pas désactiver complètement le zoom et c'était exactement ce dont j'avais besoin.
brendan
1
Vous pouvez également définir font-size: 1rempour la page entière, de sorte que la police évolue bien, évitant simultanément le problème de "focus sur le zoom".
itachi
12

veuillez essayer d'ajouter cette méta-étiquette et ce style 

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


<style>
body{
        touch-action: manipulation;
    }
</style>
Sarath Ak
la source
1
ne doit pas touch-actionêtre défini sur none- developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Values
rahulroy9202
@ rahulroy9202 pour moi touch-action: manipulation;a bien fonctionné. touch-action: none;
n'a
7

Il semble que l'ajout de balises META à index.html n'empêche pas le zoom de la page. L'ajout de style ci-dessous fera la magie.

:root {
  touch-action: pan-x pan-y;
  height: 100% 
}

EDIT: Démo: https://no-mobile-zoom.stackblitz.io

Api
la source
2
Cela devrait être accepté, corrigeant également le safari mobile ios13 atm
Magico
Cela fonctionne comme prévu depuis le mobile, merci! vérifier ici proyecto26.com/animatable-component
jdnichollsc
6

Solution possible pour les applications Web: bien que le zoom ne puisse plus être désactivé dans iOS Safari, il sera désactivé lors de l'ouverture du site à partir d'un raccourci de l'écran d'accueil.

Ajoutez ces balises META pour déclarer votre application comme «compatible avec les applications Web»:

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name='apple-mobile-web-app-capable' content='yes' />

Cependant seulement utiliser cette fonction si votre application est auto - entretenue, comme les boutons avant / arrière et la barre d'URL aswell comme les options de partage sont désactivées. (Vous pouvez toujours faire glisser votre doigt vers la gauche et la droite). Cette approche permet toutefois d'utiliser une application comme ux. Le navigateur plein écran ne démarre que lorsque le site est chargé à partir de l'écran d'accueil. Je ne l'ai également fait fonctionner qu'après avoir inclus un apple-touch-icon-180x180.png dans mon dossier racine.

En bonus, vous souhaiterez probablement également inclure une variante de cet aswell:

<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>
denkquer
la source
1

Vous pouvez accomplir la tâche en ajoutant simplement l'élément 'meta' suivant dans votre 'tête':

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

L'ajout de tous les attributs comme «largeur», «échelle initiale», «largeur maximale», «échelle maximale» peut ne pas fonctionner. Par conséquent, ajoutez simplement l'élément ci-dessus.

Kasumi Gunasekara
la source
-1 
<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

Veuillez ajouter le script pour désactiver le pincement, appuyez sur, concentrez Zoom

Prem
la source