Zoom auto dans les input en mobile
basil
-
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
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.
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.
A voir également:
- Html input zoom on mobile
- Chaine tnt gratuite sur mobile - Guide
- Editeur html - Télécharger - HTML
- Sytadin mobile - Télécharger - Transports & Cartes
- Mfacebook.com mobile - Guide
- Instagram mobile sur pc - Télécharger - Divers Communication
4 réponses
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 ?
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 ?
en inspectant l'élément il y aurait ça potentiellement :
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.
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.
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.
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.