23

我有一个适应性强的网络应用程序。为了避免水平滚动，我编写了以下 CSS 代码：

html {
    overflow-x: hidden; }

这在台式机上运行良好，但在移动设备上却不行。如果我在移动设备上显示该应用程序，该应用程序会很好地适应。问题是当我从右到左滚动时。页面移动了一点。我希望页面不要水平移动。

编辑：

该页面不会在所有移动设备上滚动。我已经在具有相同版本 Android 的两台设备上尝试过它，它只能在其中一台设备上滚动。

4

10 回答 10

46

检查所有的填充物。如果您将填充添加到宽度设置为 100% 的内容，它将超出父项。

此处显示 http://jsfiddle.net/wzZ3W/

代码

<div id="fillX">
    <div id="childXFill">
    </div>
</div>

#fillX
{
    background:red;
    width:100%;
    opacity:0.5;
}

#childXFill
{
    background:blue;
    width:100%;
    padding:10px;
    opacity:0.5;
}

还要检查跨越页面的元素的负左右边距。例如http://jsfiddle.net/s7zrukj2/2/

另外，使用 CSS 重置。

如果你不想使用overflow: hidden，你也应该将它设置在 body 元素上。像这样

body, html { overflow-x:hidden; }

尽管某些内容溢出的事实表明您的响应式设计存在错误，您应该尝试修复它以防止移动用户看不到某些内容。

于 2013-02-26T12:50:09.087 回答
28

您可以将其放在控制台中以概述所有块/div。然后你可以找到你的容器之外的那个。

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})
于 2018-06-30T20:40:31.607 回答
16

如果不适用于移动设备，则应使用以下元标记：

<meta name="viewport" content="width=device-width, initial-scale = 1.0, 
maximum-scale=1.0, user-scalable=no" />

这会将宽度设置为设备宽度。

于 2016-06-13T01:54:43.693 回答
4

您需要确保父容器的宽度不大于手机屏幕尺寸

所以最好的办法是对所有内容都使用 % 宽度，并确保没有固定的内容大于移动屏幕尺寸

于 2013-02-26T10:59:25.790 回答
3

如果你们中的任何人使用 Boostrap 并遇到这个问题，那么这就是答案。

对于引导用户

.row用.containeror包裹你，.container-fluid它会解决问题。

于 2020-07-01T11:21:15.150 回答
2

在 html 标头上设置移动视口

<meta name="viewport" content="width=device-width, initial-scale = 1.0,maximum-scale=1.0, user-scalable=no" />

确保你的隐藏溢出

  body, html { overflow-x:hidden; }
于 2017-10-26T17:30:15.137 回答
1

我只是想分享我是如何解决我的问题的。我尝试了所有方法，包括溢出-x、为所有元素添加红色边框等。仍然能够向右滚动。

首先，我首先删除“检查元素”中的容器，直到无法向右滚动。然后钻入问题所在的div。这是一个隐藏的下拉 div，位于“可见：隐藏”和显示：块；. 我通过输入“display：none”来解决这个问题，现在一切都很好。

于 2018-09-20T18:12:40.427 回答
0

添加到 Dexter 的 Bootstrap 评论以及填充的最佳答案中，Bootstrap 用户还应该查看各种间距实用程序/类。

当前文档的链接如下，尽管您可能需要查看您的 Bootstrap 版本的相关文档。

任何带有 p- 或 px- 的东西都可能导致水平滚动问题，即使包含在 .row 中也是如此。

有时 pl- 或 pr- 可以解决创建水平滚动条的 px- 。或者 px-2 代替 px-5。

这些类的命名格式为 {property}{sides}-{size} 用于 xs，{property}{sides}-{breakpoint}-{size} 用于 sm、md、lg 和 xl。

于 2020-09-15T14:58:34.840 回答
0

我真的是一个初学者，但我想分享我的经验，你可能会觉得它有帮助。所以我正在制作一个带有错误模板的网站，并注意到在响应式视图中它有一个空白区域，可以让你向右滚动，我认为它可以通过改变 body 或 html 宽度和溢出来修复。但实际上它是当你按下它的图标时弹出的菜单的容器。换句话说，它的过渡是“1s 宽度缓和”但是通过这样做，它在隐藏时在右侧保留了一些空白空间。所以我只是将转换切换从宽度更改为高度，尽管我真的不知道是否需要这样做，或者我应该用''来做显示''，然后它就消失了。希望这有帮助！

//例子//

.opened {
    display: block;
    height: 90%;
    transition: height 1s ease-in-out;
}

.closed {
    display: none;
    height: 0px;
    transition: height 1s ease-in-out;
}

//而不是像以前那样的''width''。//

于 2022-02-14T18:08:45.330 回答
0

我的问题是，当我在移动设备上放大和缩小时，UI 不会完全缩小到最初的样子。我发现了这个https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_width_and_screen_width

<meta name="viewport" content="width=device-width, initial-scale=0.86, minimum-scale=0.86">
于 2022-02-24T05:38:56.557 回答