Discussion :

[saluts92]

BOnjour,

Avec un smartphone Iphone, quand on clique sur un champ de saisie de formulaire la page grossit, le clavier s'ouvre. Mais quand on a fini de taper, la page ne reprend pas sa taille initiale

On peut supprimer cet effet en indiquant "maximum-scale=1.0" dans la balise META appropriée, mais dans ce cas il n'est plus possible de zoomer sur Android.

N'existe t-il pas un moyen pour garder le zoom pour ceux qui le veulent sur Android et iphone et désactiver le zoom automatique lors de la saisie d'un champ sur Iphone ?
Ou que la page retrouve sa taille initiale après la saisie ?

D'avance merci

[ThomasR]

Bonjour,
Sur Safari iOS, le navigateur zoomera automatiquement si la taille de police de l'input ou du select que tu focus est inférieure à 16px.
Aussi, il faut que le pseudo selecteur :focus soit associé sur le <select>.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
input[type="email"],
input[type="text"],
select:focus,
textarea {
  font-size: 16px;
}

Si tu dois absolument avoir une taille de police inférieure à 16px, tu ne pourras pas obtenir le comportement que tu souhaites, sauf a adapter la meta viewport avec javascript suivant le navigateur (ce qui n'est pas recommandable).

[saluts92]

Merci bcp, ça fonctionne

par contre j'ai vu un site (smallable) qui écrit petit et sur iphone ça ne zoom pas quand on click dessus

pourtant il n'a pas interdit le zoom, je n'ai pas réussi à savoir pourquoi