【问题标题】：HTML body not filling complete width on mobile devices [closed]HTML正文未在移动设备上填充完整宽度[关闭]
【发布时间】：2015-08-02 05:30:21
【问题描述】：

如果我在普通浏览器中打开我的 (GWT) 页面，一切正常。正文占据整个宽度，内容很好地居中。但是如果我在手机上尝试，body 不会占据整个宽度，因此内容不会居中。

我不知道为什么会这样显示。此外，将 100% 宽度添加到 body 和 html 标签并不能解决问题。

有没有办法让它在移动设备上正常工作？

可以通过以下方式访问该页面：http://www.vegantastic.de/

【问题讨论】：

对于初学者，使用这个视口标签：<meta name="viewport" content="width=device-width, initial-scale=1.0">
@APAD1：这让它变得更好：2.vegantastic0.appspot.com
您在整个页面 ID 和类中使用像素宽度。如果你想要流畅的设计，你需要使用基于百分比的宽度，这样页面才能适应。
天哪，这已经 2 岁了，Chrome 中仍然存在问题。

标签： html css mobile

【解决方案1】：

只需将其添加到您的正文标签中，您的问题就应该得到解决：

body {
  position: absolute;
 }

【讨论】：

你能解释一下解决方案吗？

【解决方案2】：

为什么`body` 不是全宽，即使它设置为 100% / vw？

以一种奇怪的方式，它是全宽，但浏览器会自动缩小视口，因此它适合溢出的内容。

要检查是否是这种情况，请在控制台中输入以下内容(1)：window.visualViewport.scale

1) 2019 年 9 月编辑：visualViewport: only available on Chrome - 抱歉延迟通知

如果返回类似 0.8 的值，则主体大小正确，但视口缩小了。

您还可以双击以在 scale 1 和 "fit-content-scale" 之间切换（需要像 chrome 开发工具中那样进行触摸模拟）。

`body`如何不溢出？

参见此处https://stackoverflow.com/a/14271049/3313410“在正文中创建站点包装器 div”
或检查，如果某个元素有min-width，则“覆盖”它的width
或检查，如果有东西被旋转，或边缘出https://stackoverflow.com/a/45534745/3313410

【讨论】：

谢谢，您链接的文章为我提供了答案。将 overflow-x:hidden 放在行为不良的子元素的父 div 中，阻止它溢出到直角并弄乱布局。
谢谢！用overflow-x:hidden在body里面封装div，帮我解决了。

【解决方案3】：

我遇到了同样的问题。在我的例子中，有一个grid 元素有很多列，grid-gap 设置为50px。它导致html 扩展。我认为在小屏幕上减少grid-column-gap 是一个好习惯。

【讨论】：

我可以用 grid-gap (+1) jsfiddle.net/94y1b7qu 重现溢出...尽管使用小数单位 (fr) 或查看单元格宽度的总和可能是另一个想法+ gap-width 所以它低于 100vw（在演示中总和是 125vw），或者使用媒体查询创建多个布局（例如移动单列）...

【解决方案4】：

这可能是因为您的网页上的字很长。使用正确的视口元标记后：

<meta name="viewport" content="initial-scale=1.0, width=device-width">

我试过了，把这个文本放在一个段落元素中，在一些空的 HTML 文档中：

&lt;p&gt;Here I have a text, and I am going to use a very long, and not-imaginary word (oh it's real) inside. Without some word-breaking CSS, the result will break the screen on smaller devices: Pseudopseudohypoparathyroidism&lt;/p&gt;

当我在没有手机模拟器的情况下缩小屏幕尺寸时发生了什么：

当我用手机模拟器缩小屏幕尺寸时发生了什么：

差别很大。我的提示：使用以下 CSS 属性：

p {
    word-break: break-word;
}

【讨论】：

太好了，谢谢！仅供参考，仅视口 META 就足以修复由于长 URL 而缩小的视图宽度。有趣的是，我的旧（姜饼）WebKit（就像任何桌面浏览器一样，当然）没有这个缩小宽度的问题：在过去，视口宽度可能很好，同时包装了那些长 URL。我想知道为什么今天更喜欢新的默认行为。

【解决方案5】：

在我的例子中，body（和 html）元素在从 display: flex; 组中删除属性后恢复正常。经过调查，我发现每个具有自动计算宽度的元素都必须在一个具有高度和宽度的元素中，并且将所有子元素一直包裹到身体。在向父元素添加一些overflow:auto; position:relative; 后，body 可以正确缩放，显示 flex 嵌套在 display flex 中。

@import '../../variables.scss';
:host {
  overflow: auto; // added this line
}

.top-bar {
    display: flex;
    flex-direction: row;
    padding: 10px;
    box-shadow: $shadow;
    position: relative;
    .search-item {
        flex: 1;
        margin: 0 1em;
        display: flex;
        flex-direction: row;
        position: relative;
        input {
            margin: 0;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            border-right-width: 0px;
            flex: 1;
            width: 1px;
        }
        button {
            margin: 0;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            border: 1px solid #ccc;
            border-left-width: 0px;
            box-shadow: inset $shadow;
        }
    }
    button.icon-only {
        border: none;
        background-color: transparent;
    }
}

菜单如下所示：

之前：

之后：

【讨论】：

【解决方案6】：

我可以看到这个问题背后的问题已经解决了，但是我刚刚遇到了同样的问题，这里的答案不适用于我的情况，因为评论中说明了滚动禁用，以及正文中的任何其他样式修改似乎影响了结果。

经过实验，我发现这是由于我的页面内的一个元素被旋转并且它的高度成为移动设备上的障碍，因为它更接近身体的右端。

如果有人像我这样通过谷歌找到这个问题，我想添加这个答案：

此问题可能是由多种因素引起的，您可能需要调查您的组件的宽度是否在移动视图上没有成为问题。您的页面上可能有一个 div 太长，或者一个边距超出正文的旋转的 div。

【讨论】：

【解决方案7】：

这让我发疯了，我只是通过在正文中添加 position:fixed 来解决它

【讨论】：

不确定为什么会这样，但为我解决了这个问题。感谢发帖。
是的，这也解决了我的问题！请注意，position: fixed; 禁用滚动。如果您需要，请改用position: absolute;。
position: absolute; 确实有效（我也必须指定width: 100vw;）——但有什么“干净整洁”的解决方案吗？
如果我将位置设置为相对或绝对，这对我不起作用。正确的解决方案是注释掉 html，直到您发现元素溢出超过 100% 并导致所有内容按比例缩小。
不要使用这种方法。当这种情况发生时，你体内的一个元素可能会通过使用负边距或类似的东西来打破窗口。打开浏览器的inspect元素，逐个删除元素，找出是哪个元素导致了问题。

为什么body 不是全宽，即使它设置为 100% / vw？

body如何不溢出？

为什么`body` 不是全宽，即使它设置为 100% / vw？

`body`如何不溢出？