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

Question

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>

      ....

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

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

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

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

Answer 1

这是在我的电脑上完成的。我刚刚禁用了页眉的设置宽度。

Answer 2

问题是您的 header 和页脚都有固定的宽度。这通常不是适当媒体查询的问题，但在我看来，为了不必担心添加更多媒体查询，我只会将 CSS 更改为 header，如下所示：

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

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

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

How to disable horizontal tap if content fits to mobile screen

html

css

viewport

twitter-bootstrap

twitter-bootstrap-3