Question Comment puis-je "désactiver" le zoom sur une page Web mobile?


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 effectue un zoom avant, masquant 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?


245
2017-12-17 17:00


origine


Réponses:


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

342
2017-12-17 17:02



Pour ceux qui sont en retard à la fête, la réponse de kgutteridge ne fonctionne pas pour moi et la réponse de Benny Neugebauer inclut target-densitédpi (un caractéristique qui est dépréciée).

Cela fonctionne cependant pour moi:

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

139
2018-01-20 22:35



Il y a un certain nombre d'approches ici - et bien que la position est que En général, les utilisateurs ne doivent pas être restreints Quand il s'agit de zoomer à des fins d'accessibilité, il peut y avoir des cas où cela est nécessaire:

Rendre la page à la largeur de l'appareil, ne pas mettre à l'échelle:

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

Empêche la mise à l'échelle et empêche l'utilisateur d'effectuer un zoom:

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

Suppression de tous les zooms, de toutes les mises à 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" />

41
2017-11-25 12:45



Vous pouvez utiliser:

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

Mais s'il vous plaît noter qu'avec Android 4.4 la propriété target-densitydpi n'est plus pris en charge. Donc, pour Android 4.4 et plus tard, ce qui suit est suggéré comme meilleure pratique:

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

37
2017-08-22 12:10



Comme il n’ya toujours pas de solution au problème initial, voici mes deux cents.

Mobile Safari requiert une taille de police dans les entrées de 16px. Alors

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  font-size: 16px;
}

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

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

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


7
2017-08-19 08:53



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 tels que 'width', 'initial-scale', 'maximum-width', 'maximum-scale' peut ne pas fonctionner. Par conséquent, ajoutez simplement l'élément ci-dessus.


1
2017-11-09 04:08



une balise META de fenêtre de périphérique ne fonctionnera pas .i ce cas, vous pouvez ajouter ce script

$(document).on('touchmove', false);

par exemple:            

</head>
<body>
<script>$(document).on('touchmove', false);</script>
</body>

0
2017-09-20 04:09