zoom auto dans les input en mobile Fermé

Question

Bonjour, 

Je souhaiterai enlever le zoom effectué automatiquement lorsqu’on est sur téléphone, et qu'on sélectionne un input.

Mes recherches n'ont rien donnés, j'ai essayé plusieurs solutions :

Ajouter <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> dans le head de mon site, en jouant sur la valeure (0, 0.5, 1...) et sur le fait d'enlever "width=device-width". Le zoom est bien désactivé mais l'apparence du site n'est plus du tout respectée, je met des photos pour illustrer 

apparence désirée :
http://image.noelshack.com/fichiers/2021/37/4/1631799586-242161008-4341882885939122-7161175763648025472-n.jpg

apparence avec le meta :
http://image.noelshack.com/fichiers/2021/37/4/1631799585-shh.jpg

J'ai aussi essayer d'ajouter dans le css ceci :
@media screen and (max-width: 767px) {
  input, select, textarea {
    font-size: 16px;
  }
}
Aucune modification, le zzom est toujours présent.

Pitet · Answer

Bonjour,

Il faudrait peut-être commencer par identifier le code css responsable de ce zoom lors de la sélection d'un input sur mobile (par exemple en inspectant l'élément via les outils de dev) afin de pouvoir modifier ou surcharger ce code.

Quel est le code css utilisé sur la page ?

basil · Answer

en inspectant l'élément il y aurait ça potentiellement :
button, input, optgroup, select, textarea {    font-family: inherit;    font-size: 100%;    line-height: 1.15;    margin: 0;}

mais je n'ai personnellement mit aucun css sur les input en rapport avec du zoom, il semblerait que ce soit un problème récurent sur mobile d'après mes recherches.

baba83500 · Answer

Nouvel élément : c'est enfaite le navigateur Firefox sur mobile, qui est responsable de ce zoom.

Pitet · Answer

Au temps pour moi, effectivement après une rapide recherche il semble que ce zoom soit un comportement par défaut de certains navigateurs (Safari sur iOS notamment) lorsque les input sont trop petits. Avec Chrome ou Firefox sur Android je n'ai pas de zoom sur les input.

La solution avec la meta viewport est bien une des solutions possibles recommandées, mais tu ne devrait pas avoir à jouer avec la valeur de maximum-scale, celle-ci devrait être à 1.
Tu peux aussi éventuellement essayer d'ajouter une font-size supérieur à 16px sur les input en css puisque ce zoom semble être appliquées uniquement pour les input trop petits.

Enfin, une autre solution possible serait de laisser ce comportement par défaut (qui n'est dénué de sens : ceci peut en effet être pratique pour mieux voir la saisie si les champs sont trop petits). Tant que le code html est correct, on peut considérer que la manière dont les navigateurs l'interprète n'est pas forcément de la responsabilité du site.

Zoom auto dans les input en mobile

4 réponses

Discussions similaires