Forum : Bootsrap - Problème d'ajustement menu

Bonjour,

Je découvre actuellement bootstrap que j'utilise pour un projet perso. Tout va bien sur la version pc mais c'est sur mobile que cela coince.

J'ai un problème notamment au niveau du menu horizontal. Lorsque j'arrive sur le site avec mon mobile celui apparaît comme si il y avait un zoom comme vous pouvez le voir sur l'image ci-dessous :

[http://img15.hostingpics.net/pics/768424591.jpg]()

Lorsque j'effectue un pincement j'obtiens ensuite ceci :

[http://www.hostingpics.net/viewer.php?id=448840312.jpg]()

[http://www.hostingpics.net/viewer.php?id=491972163.jpg]()

J'ai essayer de regarder les différents options possibles de la balise méta Viewport mais rien n'y fait j'ai toujours ce gros zoom et ce mauvais ajustement de la page.

Je ne sais pas si c'est lié au menu mais des que j'arrive sur ma page le menu responsive apprait directement déployer comme vous pouvez le voir sur les images 1 et 2.

Voici une partie de ma structure Html :

<body>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="row navigation">
        <div class="navbar-header">
        <button class="navbar-toggle" id="burger" type="button" data-toggle="collapse" data-target="#navbar-main" aria-expanded="false">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div id="navbar-logo"></div>
        </div>
        <div class="navbar-collapse collapse navbar-right" id="navbar-main" aria-expanded="false">
          <ul class="nav navbar-nav" id="menu-h">
            <li class="nav_link current"><a href="#">Home</a></li>
            <li><a class="nav_link"  href="#">Réalisations</a></li>
            <li><a class="nav_link"  href="#">Projets</a></li>
            <li><a class="nav_link"  href="#">Compétences</a></li>
            <li><a class="nav_link"  href="#">Contact</a></li>
          </ul>
        </div>
      </div> <!-- Fin Row Navigation -->
    </div> <!-- Fin Container Navigation -->
  </nav>
  <section class="container-fluid" id="bg-home">
    <h1>Développeur Front-End</h1>
    <a id="arrow-top" class="effectBounce" href="#slide2"></a>
  </section>

Si quelqu'un vient d'où peut venir le problème ça me débloquerai bien ^^

Cordialement.

passealasuite

Salut,

Tu peux essayer de supprimer le zoom avec la propriété user-scalable.

<meta name="viewport" content="width=device-width, user-scalable=no">

La balise est à placer dans ton <head>.
As-tu une version en ligne de ton projet ?

Bootsrap - Problème d'ajustement menu

1 réponse