Empêcher l'iPhone de zoomer sur « sélectionner » dans l'application Web

Question

J'ai ce code :

 <select>
    <option value="c">Klassen</option>
    <option value="t">Docenten</option>
    <option value="r">Lokalen</option>
    <option value="s">Leerlingen</option>
</select>

Exécution dans une application Web en plein écran sur iPhone.

Lors de la sélection d'un élément de cette liste, l'iPhone effectue un zoom avant sur l'élément select Et ne fait pas de zoom arrière après avoir sélectionné quelque chose.

Comment puis-je empêcher cela? Ou faire un zoom arrière ?

Answer 1

user-scalable=no est ce dont vous avez besoin, juste pour qu'il y ait en fait une réponse définitive à cette question

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

Answer 2

Cela a semblé fonctionner pour mon cas pour résoudre ce problème:

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

Suggéré ici par Christina Arasmo Beymer

Answer 3

L'iPhone zoomera légèrement sur les champs du formulaire si le texte est défini sur moins de 16 pixels . Je suggérerais de définir le texte du champ de formulaire mobile sur 16 pixels, puis d'écraser la taille pour le bureau.

Les réponses disant de désactiver le zoom ne sont pas utiles pour l'accessibilité / les utilisateurs malvoyants peuvent toujours vouloir zoomer sur des mobiles plus petits.

Exemple:

 # Mobile first
input, textarea, select {
  font-size: 16px;
}

# Tablet upwards
@media (min-width: 768px) {
  font-size: 14px;
}