如果内容适合于移动屏幕

-2

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

     ....

在移动其内容宽度相同移动屏幕宽度限定如何禁用水平抽头。

但是，用户可以向左水平拖动内容，以便左侧出现丑陋的空白区域。

如何解决这个问题，让unnessecary左拖是不允许的？也许页面中的某个元素导致这种效果？

我试图删除Chrome开发人员工具“元素”标签中的元素，但仍然允许水平滚动。

来源

2017-01-23 Andrus

这里是问题：http://i.imgur.com/m6f3bRW.png –

在某些页面中需要水平滚动，所以它不能始终禁用。如果不是必需的，我希望它会被浏览器自动禁用。提供的图片中指向的宽元素可能由facebook脚本创建。如何强制facebook创建适当的宽度？ – Andrus

问题是你的页眉和页脚都有一个硬设置宽度给他们。这通常不是适当的媒体查询，但在我的订单意见的问题不用担心增加更多的媒体查询我只想改变你的CSS的标题像我有如下：

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

对于页脚，你有一个脸书工具栏，有很多硬插入宽度。你可以通过将整个元素包装在div中并将width: 100%; overflow: hidden;应用于该div来破解这一点，但我强烈建议您对该插件做更多的研究，以使其正常工作或找到更好的插件，以便为您提供更好的结果。

来源

2017-01-24 03:01:03 Matthew

谢谢。 Insted of width：100％我从样式中删除了宽度，如Valius79答案中所述。这个可以吗？ – Andrus

这在我的比赛中做到了。我只是禁用了标题的设置宽度。

来源

2017-01-23 22:44:32 Vcasso

如果内容适合于移动屏幕

回答

相关问题