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

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