Comment désactiver prise horizontale si le contenu correspond à l'écran mobile

-2

Bootstrap 3 panier est défini à l'aide de balisage standard bootstrap commeComment désactiver prise horizontale si le contenu correspond à l'écran mobile

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
<body>  
    <div class="container"> 
     <div id="_info"></div> 

     <header class="row"> 
      <div class="col-xs-12"> 
    </header> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">L&#252;li navigeerimist</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-left"> 
        <li> 

     ....

Dans sa largeur mobile de contenu est le même que la largeur de l'écran mobile.

Cependant, l'utilisateur peut faire glisser le contenu horizontalement vers la gauche de sorte qu'un espace blanc laid apparaisse dans la gauche. Comment résoudre ce problème afin que le glissement à gauche n'est pas autorisé? Peut-être que certains éléments de la page provoquent cet effet?

J'ai essayé de supprimer des éléments dans l'onglet Eléments des outils de développement Chrome, mais le filtrage horizontal est toujours autorisé.

Source

2017-01-23 Andrus

Et voici le problème: http://i.imgur.com/m6f3bRW.png –

Dans certaines pages, le défilement horizontal est requred donc il ne peut pas toujours être désactivé. Je m'attends à ce qu'il soit automatiquement désactivé par le navigateur si ce n'est pas nécessaire. Un élément large dans l'image fournie est créé probablement par un script facebook. Comment forcer facebook pour créer la largeur appropriée? – Andrus

Le problème est que votre en-tête et pied de page ont tous les deux une largeur fixe. Cela devrait normalement pas être un problème avec les requêtes des médias appropriés, mais à mon avis, afin de ne pas avoir à vous soucier d'ajouter plus de requêtes médias Je voudrais simplement changer votre CSS pour l'en-tête comme je l'ai ci-dessous:

@media only all and (min-width: 481px) 
    header, .wrap { 
     width: 100%; 
     margin: 0 auto; 
    }

Pour la footer, vous avez une barre d'outils facebook qui a beaucoup de largeurs en ligne hardset. Vous pouvez hacker cela ensemble en enveloppant l'élément entier dans un div et en appliquant width: 100%; overflow: hidden; à ce div mais je vous recommande vivement de faire plus de recherches sur ce plugin pour le faire fonctionner correctement ou trouver un meilleur plugin qui vous donnera de meilleurs résultats.

Source

2017-01-24 03:01:03 Matthew

Merci. Insted de largeur: 100% J'ai enlevé la largeur du style comme décrit dans Valius79 réponse. Est-ce correct ? – Andrus

Cela l'a fait sur mon ordi. Je viens de désactiver la largeur de l'en-tête.

Source

2017-01-23 22:44:32 Vcasso

Comment désactiver prise horizontale si le contenu correspond à l'écran mobile

Répondre

Questions connexes