[VueJS2] Problème Vue Responsive

Rouli
Javascript

Bonjour,

Voila je rencontre un petit problème.

Je vous explique, de base quand je créé mon projet VueJS avec WebPack (ou WebPack-simple) ou Browserify (ou Browserify-simple), j'ai un problème avec la partie responsive.

Je m'explique . Quand je redimensionne la page dans mon navigateur aucun soucis, mais lorsque que je passe sur un smartphone ou que j'utilise par exemple l'émulateur de Google Chrome, le body et la "div #app" garde une hauteur et une largeur fixe et à l'oeil cela donne un effet de rétrécissement. Voyez par les images:

Ce que j'obtiens :


Ce que j'aimerais obtenir:

(J'ai repris le même code HTML et CSS que pour l'exemple précèdent mais en le mettant dans un fichier HTML et CSS simple)


Comment pourrais-je résoudre mon problème ?

Merci d'avance!

7 réponses

betaWeb
Réponse acceptée

Regarde au niveau de la balise HTML <meta name="viewport"> dans le <head>. Quelle est sa configuration ?

Pandazaur

Bonjour,

Lorsque tu passes en mode "téléphone" tu penses bien à refresh chaque fois que tu changes la dimension ?

Lartak

Bonsoir.
Au cas où tu ne le sache pas, le responsive ne se fait pas tout seul.
Au niveau du CSS par exemple, il te faut utiliser les media queries pour modifier l'affichage selon les résolutions/supports.
Dans l'inspecteur de ton navigateur pour le CSS, ce sont exactement les mêmes règles que tu sois sur une résoltuion pour écran d'ordinateur que pour l'écran d'un téléphone (voir par exemple le margin-top qui est de 60px dans les deux cas).
Le navigateur ne va pas créer par lui même des règles pour le responsive automatiquement parce que tu utilises VueJS.

Rouli
Auteur

Bonjour,

Désolé pour le retard, j'étais pas mal occupé ces derniers jours.

@Padazaur, oui je rafraichis bien ma page

@Lartak, oui je sais déjà tout cela.
Mais ce que je voulais dire c'est que ma page codée en utilisant VueJS se redimensionne justement toute seule lors du rétrécisement de la page. Alors que normalement c'est n'est pas du tout le bon comportement avec une "page basique" (comme dans mon deuxième exemple).
Mes exemples ne sont pas clairs ?

betaWeb

Salut,

Le boilerplate VueJS arrive avec un HTML/CSS de base, il te faut regarder de ce côté là. Cela dit, je ne comprends pas bien quel est le souci : tu veux garder cette page là sur ton app ?

Rouli
Auteur

Salut,
J'ai essayé justement de trouver où il pourrait y avoir du CSS de base dans VueJS mais je n'ai pas encore trouvé... Même en faisait un "reset" au début de mon CSS cela ne change rien..
Non je ne veux pas garder cette page là sur mon app, c'est juste que sur l'app que je suis entrain de coder, cela fait exactement la même chose...

Rouli
Auteur

Merci beaucoup betaWeb !
En effet j'avais pas pensé à regarder à ce niveau là. J'ai rajouté dans le 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Et ça à résolu le problème.

Merci à tous pour votre temps !