Veuillez vous connecter ou créer un compte pour suivre ce topic
Ce topic est suivi par: Jerem971, VictorP
Ce topic a été résolu
Auteur Sujet: Erreur de taille de site web pour portables

VictorP

Messages: 11

Bonjour, 
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

Jerem971

Messages: 480

Hello 'VictorP',

Pour résoudre ton problème, il suffit de rajouter à ton CSS, au niveau du body :

overflow-x: hidden;
Ceci empêche le scroll horizontal ! 😉
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" />
La syntaxe de la metadonnées "viewport" que je t'ai donné n'est pas détectable par le service W3C pour le moment et elle empêche vraiment l'utilisateur de zoomer. 😉
Publicité

Jerem971

Messages: 480

Hello 'VictorP',

Pour résoudre ton problème, il suffit de rajouter à ton CSS, au niveau du body :

overflow-x: hidden;
Ceci empêche le scroll horizontal ! 😉
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" />
La syntaxe de la metadonnées "viewport" que je t'ai donné n'est pas détectable par le service W3C pour le moment et elle empêche vraiment l'utilisateur de zoomer. 😉

VictorP

Messages: 11

Bonsoir Jerem971, 
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

VictorP

Messages: 11

C'est bon ! Il suffisait d'attendre un peu 😀
Merci encore !

Jerem971

Messages: 480

Re:

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

Messages: 11

D'accord j'essayerais alors 😀
A bientôt peut-être 😁

PrimFX
Membre Premium

Messages: 125

Bonjour @VictorP,
N'hésite pas à cliquer sur le petit "V" en haut à droite du message de @Jerem971 si sa réponse t'as permis de résoudre ton problème : cela permettra à d'éventuelles autres personnes de trouver plus rapidement réponse à leur problème 😉

VictorP

Messages: 11

Avec plaisir ! 
Son code était simple et fonctionnel alors merci à lui !


Vous devez vous connecter ou créer un compte pour poster une réponse