HTML 正文未在移动设备上填充完整宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30358630/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML body not filling complete width on mobile devices
提问by jan
If I open my (GWT) page in a normal browser, everything works fine. The body takes the whole width and the content is nicely centered. But if I try this on a mobile phone, the body does not take the whole width and therefore the content is not centered.
如果我在普通浏览器中打开我的 (GWT) 页面，一切正常。正文占据整个宽度，内容很好地居中。但是如果我在手机上尝试这个，身体不会占据整个宽度，因此内容不会居中。
I couldn't find out why it is being displayed like this. Also, adding 100% width to body and html tag does not solve the issue .
我不知道为什么它会这样显示。此外，将 100% 宽度添加到 body 和 html 标签并不能解决问题。
Is there a way to get this working nicely on a mobile device?
有没有办法让它在移动设备上很好地工作？
The page can be reached under: http://www.vegantastic.de/
该页面可以通过以下方式访问：http: //www.vegantastic.de/
回答by milpool
this was driving me crazy and i just solved it by adding position:fixedto the body
这让我发疯了，我只是通过添加position:fixed到身体来解决它
回答by Breaker222
Why is bodynot full width, even though its set to 100% / vw?
为什么body不是全宽，即使它设置为 100% / vw？
In a strange way it isfull width, but the viewport is scaled down automatically by the browser, so it fits in the overflowing content.
奇怪的是，它是全宽的，但浏览器会自动缩小视口，因此它适合溢出的内容。
To check, if this is the case, type this in the console (1): window.visualViewport.scale
要检查，如果是这种情况，请在控制台(1) 中键入：window.visualViewport.scale
1) edit Sep. 2019: visualViewport: only available on Chrome- sry for late notice
1) 编辑 2019 年 9 月：visualViewport：仅在 Chrome 上可用-稍后通知
If it returns something like 0.8, then the body size is correct, but the viewport is scaled down.
如果它返回类似0.8 的东西，那么主体尺寸是正确的，但视口被缩小了。
You can also double tap to toggle between scale 1and "fit-content-scale"(needs touch simulation like in chrome dev-tools).
您还可以双击以在比例 1和“适合内容比例”之间切换（需要像 chrome dev-tools 中的触摸模拟）。
How to not overflow body?
怎么不溢出body？
- See here https://stackoverflow.com/a/14271049/3313410"Creating a site wrapper div inside the body"
- or check, if a certain element has a
min-width, that "overrides" itswidth - or check, if something is rotated, or margins out https://stackoverflow.com/a/45534745/3313410
- 请参阅此处https://stackoverflow.com/a/14271049/3313410“在正文中创建站点包装器 div”
- 或者检查，如果某个元素有一个
min-width，它“覆盖”了它的width - 或检查，是否有旋转或边距https://stackoverflow.com/a/45534745/3313410
回答by Maarten Wolfsen
It might be because of a very long word on your webpage. After using the correct viewport meta tag:
这可能是因为您的网页上有一个很长的词。使用正确的视口元标记后：
<meta name="viewport" content="initial-scale=1.0, width=device-width">
I tried this out, by placing this text inside a paragraph element, inside some empty HTML document:
我尝试了这一点，将这段文本放在一个段落元素中，在一些空的 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>What happened when I decreased the screen size without the mobile phone simulator:
我在没有手机模拟器的情况下缩小屏幕尺寸时发生了什么：
And what happened when I decreased the screen size with the mobile phone simulator:
当我用手机模拟器缩小屏幕尺寸时发生了什么：
Quite the difference. My tip: use the following CSS attribute:
差别很大。我的提示：使用以下 CSS 属性：
p {
word-break: break-word;
}
回答by Eddo
I can see that the problem behind this question was solved, but I just experienced the same issue and the answer here could not applied in my case because of the scroll disabling stated in the comment, and any other style modifications on the body seemed to affect the result.
我可以看到这个问题背后的问题已经解决了，但我刚刚遇到了同样的问题，并且由于评论中说明的滚动禁用，这里的答案无法适用于我的情况，并且身体上的任何其他样式修改似乎都会影响结果。
After experimentation I found out this was caused by an element inside my page which was rotated and its height became an obstacle on mobile, since it was closer the right end of the body.
经过实验，我发现这是由我的页面中的一个元素引起的，该元素被旋转并且它的高度成为移动设备上的障碍，因为它更接近主体的右端。
So I would like to add this answer if someone, like myself, find this question via google:
所以如果有人像我一样通过谷歌找到这个问题，我想添加这个答案：
This problem can be caused by many factors, you may want to investigate if one of your component's width is not becoming a problem on mobile view. There is probably a div too long on your page, or a rotated one which margin got out of the body.
此问题可能由多种因素引起，您可能需要调查您的组件之一的宽度是否在移动视图上没有成为问题。您的页面上可能有一个 div 太长，或者一个旋转的 div 超出了正文的边距。
回答by Exit196
In my case, body (and html) element returns to normal after removing the properties from display: flex;group. After my investigation, I discovered that every element with an automatically calculated width must be in an element that has height and width and wraps all children going all the way to the body. After adding some overflow:auto; position:relative;to the parent elements, the body scales correctly with display flex nested in display flex.
在我的情况下，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;
}
}
menu looks like this:
菜单如下所示：
before:
前：
after:
后：
回答by Marvin.H
Just add this to your body tag and your problem should be solved:
只需将其添加到您的 body 标签中，您的问题就会得到解决：
body {
position: absolute;
}
回答by badyl1g
I had the same problem. In my case there was a gridelement that had many columns and grid-gapset to 50px. It caused htmlto expand. I think it's a good practice to reduce grid-column-gapon small screens.
我有同样的问题。就我而言，有一个grid元素有很多列并grid-gap设置为50px. 它导致html扩大。我认为grid-column-gap在小屏幕上减少是一个很好的做法。
