HTML正文未在移动设备上填充完整的宽度

Question

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

我无法找到这样显示的原因。此外，为body和html标记添加100％宽度并不能解决问题。

有没有办法在移动设备上很好地运行？

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

Answer 1

这让我发疯，我只是通过向身体添加position:fixed解决了这个问题

Answer 2

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

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

我尝试了这一点，将此文本放在一个段落元素中，放在一些空的HTML文档中：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

相当不同。我的提示：使用以下CSS属性：

p {
    word-break: break-word;
}

Answer 3

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

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

要检查，如果是这种情况，请在控制台中输入：window.visualViewport.scale

如果返回 0.8 之类的内容，则正文大小正确，但视口缩小。

您还可以双击以在比例1 和＆＃34; fit-content-scale＆＃34; 之间切换（需要像Chrome中的触摸模拟DEV-工具）

如何不溢出body？

• 请参阅此处https://stackoverflow.com/a/14271049/3313410＆＃34;在正文中创建网站包装div＆＃34;
• 或检查，如果某个元素具有min-width，则＆＃34;覆盖＆＃34;它的width
• 或检查是否轮换了某些内容，或检查了https://stackoverflow.com/a/45534745/3313410

Answer 4

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

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

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

此问题可能由多种因素引起，您可能需要调查某个组件的某个宽度是否在移动视图中不成为问题。您的页面上可能有一个div太长，或者是一个边缘离开身体的旋转的div。

Answer 5

在我的情况下，从display: flex;组中删除属性后，body（和html）元素恢复正常。在我调查之后，我发现每个具有自动计算宽度的元素必须位于具有高度和宽度的元素中，并且包裹所有孩子一直到身体。在向父元素添加一些overflow:auto; position:relative;之后，正文与display display 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;
    }
}

菜单如下所示：

<强>之前：

<强>后：

Answer 6

我有同样的问题。在我的情况下，有一个grid元素具有许多列，并且grid-gap设置为50px。它导致html扩展。我认为减少小屏幕上的grid-column-gap是个好习惯。

Answer 7

只需将其添加到您的身体标签中，即可解决您的问题：

body {
  position: absolute;
 }