Erreur de taille de site web pour portables
VictorP Le 9 février 2018 à 16:49 (Édité le 25 janvier 2019 à 17:54)
Je suis en ce moment en train de créer mon site web et je me force à le rendre responsive alors je suis parti sur les media-queries pour l'adapter aux plus grands nombres de tailles d'écrans, j'utilisais pour cela l'outil "inspecter l'élément" comme ça je voyais en réduisant la taille de mon navigateur à partir de quand il fallait que j'utilise les media-queries pour que ça reste esthétique.
De cette manière, le résultat était très satisfaisant mais une fois que je l'ai mis en ligne, je me suis aperçu que l'entièreté du site était positionné à gauche et que donc pour pouvoir bien lire il fallait zoomer.
J'ai alors rapidement compris qu'il fallait utiliser la balise view-port pour ne pas avoir à zoomer, alors après l'avoir mise à 360px mon site était centré nickel sur mon portable mais la raison pour laquelle je post ce topic c'est que même si le site apparaît très bien dans l'ensemble, je peux me déplacer de gauche à droite sur le site en glissant mon doigt.
Ce que je voudrais c'est qu'il soit impossible de se déplacer de gauche à droite mais bien de haut en bas et qu'il soit uniquement possible de zoomer et non de dé-zoomer.
Merci d'avance pour vos réponses.
Victor
Profil introuvable Le 9 février 2018 à 18:53
Pour résoudre ton problème, il suffit de rajouter à ton CSS, au niveau du body :
overflow-x: hidden;
Pour maintenant empêcher l'utilisateur de zoomer sur mobile :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui, shrink-to-fit=no" />
VictorP Le 9 février 2018 à 19:29
Merci d'avoir répondu si rapidement et d'avoir résolu mon problème !
J'ai passé des heures à essayer toutes les techniques possibles sauf celles-ci apparemment 😀
Pour l'instant mon site s'affiche parfaitement quand je l'ouvre en mode privé mais pas quand le je publie 😕
Je vais voir si avec le temps ça s'arrangera😅
Merci beaucoup, au revoir
Victor
Profil introuvable Le 9 février 2018 à 19:39
Tu peux toujours vérifier si tu n'as pas d'erreurs dans ton code grâce à Firefox et le service du W3C (pour HTML ; pour CSS). Ceci pourrait également résoudre tes problèmes d'adaptation ! 😉 (En ce qui concerne Firefox, tu affiches ton code source (CTRL + U) puis tu vérifies si Firefox ne met pas quelques lignes de codes en rouge (ce qui signifie les erreurs)).
VictorP Le 14 février 2018 à 14:49
Son code était simple et fonctionnel alors merci à lui !
