web-dev-qa-db-fra.com

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

Je crée une page Web mobile qui est fondamentalement un grand formulaire avec plusieurs entrées de texte.

Cependant (au moins sur mon _ Android téléphone portable), chaque fois que je clique sur une entrée, la page entière est agrandie, ce qui masque le reste de la page. Existe-t-il une commande HTML ou CSS permettant de désactiver ce type de zoom sur les pages Web mobiles?

htmlcssmobile
293
Martín Fixman

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

Pour les retardataires de la soirée, la réponse de kgutteridge ne fonctionne pas pour moi et la réponse de Benny Neugebauer inclut target-densdpi (un fonctionnalité déconseillée ).

Cela fonctionne cependant pour moi:

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

Il y a un certain nombre d'approches ici- et bien que la position soit que typiquement les utilisateurs ne devraient pas être restreints quand il s'agit de zoomer à des fins d'accessibilité, il peut y avoir des cas où cela est requis:

Render 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 de zoomer:

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

Vous pouvez utiliser:

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

Notez cependant qu'avec Android 4.4 , la propriété target-densitdpi n'est plus prise en charge . Donc, pour Android 4.4 et versions ultérieures, nous vous suggérons de vous recommander la meilleure pratique:

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

Puisqu'il n'y a toujours pas de solution au problème initial, voici mes deux cents en CSS pur.

Les navigateurs mobiles (la plupart d’entre eux) exigent que la taille de la police dans les entrées soit 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. Il n'est donc pas nécessaire de désactiver le zoom et de perdre les fonctionnalités d'accessibilité de votre site.

Si la taille de votre police de base n’est pas de 16px ou de 16px sur les mobiles, vous pouvez utiliser des 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;
  }
}
20
Azamat Rasulov

s'il vous plaît essayez d'ajouter cette méta-tag et 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>
9
Sarath Ak

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 méta pour déclarer votre application comme "compatible 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' />

Toutefois, niquement utilisez cette fonctionnalité si votre application est autonome, comme les boutons Précédent/Suivant et la barre d’URL, ainsi que les options de partage sont désactivées. (Vous pouvez toujours glisser à gauche et à droite si) Cette approche permet cependant tout à fait l'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 prime, vous voudrez probablement aussi inclure une variante de ceci:

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

Vous pouvez accomplir cette tâche en ajoutant simplement l'élément 'méta' suivant dans votre 'tête':

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

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

1
Kasumi Gunasekara