如果内容适合移动屏幕，如何禁用水平点击答案

【问题标题】：How to disable horizontal tap if content fits to mobile screen如果内容适合移动屏幕，如何禁用水平点击
【发布时间】：2017-01-24 15:11:47
【问题描述】：

Bootstrap 3 购物车是使用 bootstrap 标准标记定义的

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

      ....

在移动设备中，其内容宽度与移动设备屏幕宽度相同。

但是用户可以水平向左拖动内容，这样丑陋的空白就会出现在左侧。

如何解决这个问题，以防止不必要的左拖动？也许页面中的某些元素会导致这种效果？

我尝试在 Chrome 开发者工具的“元素”选项卡中删除元素，但仍然允许水平滚动。

【问题讨论】：

这就是问题所在：i.imgur.com/m6f3bRW.png
在某些页面中水平滚动是必需的，因此它不能总是禁用。如果不需要，我希望浏览器会自动禁用它。所提供图片中的宽元素可能是由 facebook 脚本创建的。如何强制 facebook 创建合适的宽度？

标签： html css twitter-bootstrap twitter-bootstrap-3 viewport

【解决方案1】：

问题是你的页眉和页脚都有一个硬设置的宽度。这通常不是正确的媒体查询的问题，但在我看来，为了不必担心添加更多媒体查询，我只需更改标题的 CSS，如下所示：

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

对于页脚，您有一个 facebook 工具栏，其中包含很多硬设置的内联宽度。您可以通过将整个元素包装在一个 div 中并将width: 100%; overflow: hidden; 应用于该 div 来解决这个问题，但我强烈建议您对该插件进行更多研究以使其正常运行或找到一个更好的插件来为您提供更好的结果。

【讨论】：

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

【解决方案2】：

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

【讨论】：