HTML body没有在移动设备上填充完整宽度

Question

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

我找不出为什么它会这样显示。另外，为body和html标签添加100％宽度并不能解决问题。

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

页面下都可以达到：http://www.vegantastic.de/

Answer 1

这是推动我疯了，我只是解决它通过添加position:fixed对身体

Answer 2

我可以看到，这背后的问题，这个问题解决了，但我只是遇到了同样的问题，因为评论中声明的滚动禁用，我的案例中的答案无法应用，而对身体的任何其他样式修改似乎都会影响结果。

经过实验后，我发现这是由于我的页面里面有一个被旋转的元素造成的，它的高度成为了移动设备的障碍，因为它靠近了机体的右端。

所以我想补充这个答案，如果有人和我一样，发现通过谷歌这样的问题：

这个问题可以由许多因素造成的，你可能要调查，如果您的组件的宽度的不成为移动视图的问题。页面上可能有一个div太长，或者页面上有一个旋转的页面，页边空白。

Answer 3

在我的情况下，body（和html）元素在从display: flex;组中删除属性后恢复正常。经过我的调查后，我发现每个具有自动计算宽度的元素都必须位于具有高度和宽度的元素中，并将所有子元素一直包装到身体中。在向父元素添加一些overflow:auto; position:relative;之后，人体可以正确缩放显示flex并嵌套在显示器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 4

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

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

我尝试了这一点，通过将该文本段落元素中，一些空的HTML文档中：

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

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

发生了什么事，当我用手机模拟器降低了屏幕尺寸：

相当的差异。我的提示：使用下面的CSS属性：

p { 
    word-break: break-word; 
}