Comment puis-je "désactiver" zoom sur une page web mobile?
je crée une page Web mobile qui est essentiellement un grand formulaire avec plusieurs entrées de texte.
cependant (au moins sur mon téléphone Android), chaque fois que je clique sur une entrée la page entière zoome là, 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?
7 réponses
Ce doit ê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'
/>
pour ceux d'entre vous qui êtes en retard à la fête, la réponse de kgutteridge ne fonctionne pas pour moi et la réponse de Benny Neugebauer inclut target-densitydpi (une fonctionnalité qui est dépréciée ).
cela cependant fonctionne pour moi:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
il y a un certain nombre d'approches ici - et bien que la position soit que typiquement les utilisateurs ne devraient pas être limités quand il s'agit de zoomer à des fins d'accessibilité, il peut y avoir des incidences où est-il nécessaire:
le Rendu de la page à la largeur de l'appareil, dont l'échelle:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
empêcher l'échelle - et empêcher l'utilisateur d'être en mesure de zoom:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
suppression de tout zoom, 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" />
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 supportée . 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" />
Puisqu'il n'y a toujours pas de solution pour l'émission initiale, voici ma pure CSS deux cents.
Les navigateurs mobiles(la plupart d'entre eux) exigent que la taille de police des entrées soit de 16px. So
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
font-size: 16px;
}résout le problème. Ainsi, vous n'avez pas besoin de désactiver zoom et les caractéristiques d'accessibilité lâche de votre site.
si la taille de votre police de base n'est pas 16px ou 16px sur les mobiles, vous pouvez utiliser les requêtes mé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;
}
}Vous pouvez accomplir la tâche en ajoutant simplement le "méta" dans votre "tête":
<meta name="viewport" content="user-scalable=no">
l'Ajout de tous les attributs ('width','initial-scale', 'largeur', 'maximum de l'échelle" peut ne pas fonctionner. Donc, il suffit d'ajouter l'élément.
certaines balises meta de viewport ne fonctionneront pas .j'ai ce cas, vous pouvez ajouter ce script
$(document).on('touchmove', false);
par exemple:
</head>
<body>
<script>$(document).on('touchmove', false);</script>
</body>