Désactiver le zoom automatique dans la balise de saisie "Texte" - Safari sur iPhone

Question

J'ai créé une page HTML qui contient un <input> tag avec type="text" . Lorsque je clique dessus avec Safari sur l'iPhone, la page s'agrandit (zoom automatique). Quelqu'un sait-il comment désactiver cette fonction ?

Answer 1

Le navigateur fera un zoom si la taille de la police est inférieure à 16px et la taille de la police par défaut pour les éléments de formulaire est de 11px (au moins dans Chrome et Safari).

En outre, le select doit avoir l'élément focus pseudo-classe attachée.

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
}

Il n'est pas nécessaire d'utiliser tous les éléments ci-dessus, vous pouvez juste styliser les éléments dont vous avez besoin, par exemple : juste text , number et textarea :

input[type='text'],
input[type='number'],
textarea {
  font-size: 16px;
}

Une autre solution consiste à faire en sorte que les éléments de saisie héritent d'un style parent :

body {
  font-size: 16px;
}
input[type="text"] {
  font-size: inherit;
}

Answer 2

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
    background: #eee;
  }
}

Nouveau : IOS continuera à zoomer, sauf si vous utilisez 16px sur l'entrée sans le focus.

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select,
  textarea,
  input {
    font-size: 16px;
  }
}

J'ai ajouté un arrière-plan car IOS n'ajoute pas d'arrière-plan sur la sélection.

Answer 3

Si votre site Web est correctement conçu pour un appareil mobile, vous pouvez décider de ne pas autoriser la mise à l'échelle.

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

Cela résout le problème du flottement de votre page ou formulaire mobile.

Answer 4

En résumé, la réponse est la suivante : définissez la taille de la police des éléments du formulaire à au moins 16px.

Answer 5

input[type='text'],textarea {font-size:1em;}