HTML正文未在移动设备上填充完整的宽度
如果我在普通浏览器中打开我的(GWT)页面,一切正常.身体占据整个宽度,内容很好地居中.但是,如果我在手机上试试这个,身体不会占据整个宽度,因此内容不会居中.
我无法找出为什么会这样显示.此外,为body和html标记添加100%宽度并不能解决问题.
有没有办法在移动设备上很好地工作？
该页面可以在以下网址获得:http://www.vegantastic.de/
mil*_*ool 23
这让我发疯,我只是通过添加position:fixed到身体来解决它
- 不要使用这种方法。当这种情况发生时，你体内的一个元素可能会通过使用负边距或类似的东西来打破窗口。打开浏览器的检查元素并逐一删除元素以找出导致问题的元素。 (9认同)
- 是的,这也解决了我的问题!请注意,`position:fixed;`禁用滚动.如果你需要那么使用`position:absolute;`代替. (7认同)
- 如果我将位置设置为相对或绝对，它对我不起作用。正确的解决方案是注释掉 html，直到找到溢出超过 100% 并导致所有内容缩小的元素。 (4认同)
Bre*_*222 12
为什么将body全角设置为100％/ vw 却没有全角？
以一种奇怪的方式，它是全角的，但是视口会被浏览器自动缩小，因此它适合溢出的内容。
要检查这种情况，请在控制台（1）中键入以下内容：window.visualViewport.scale
1）编辑2019年9月：visualViewport：仅在Chrome上可用 - 抱歉
如果返回类似0.8的值，则主体大小正确，但是视口被缩小。
您还可以双击以在比例1和“适合内容比例” 之间切换（需要像chrome dev-tools一样的触摸模拟）。
如何不溢出body？
- 参见此处/sf/answers/998973461/ “在体内创建站点包装div”
- 或检查某个元素是否具有
min-width“”覆盖其元素width - 或检查是否有旋转的东西，或保证金/sf/answers/3187432181/
- 谢谢，您链接的文章为我找到了答案。将overflow-x：hidden隐藏在行为不佳的子元素的父div中，以防止其溢出到正确的角度并弄乱布局。 (2认同)
这可能是因为您的网页上有一个很长的字.使用正确的视口元标记后:
<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;
}
小智 6
只需将其添加到您的 body 标签中，您的问题就会得到解决：
body {
position: absolute;
}
- 您能解释一下解决方案吗？ (3认同)
小智 5
我可以看到这个问题背后的问题已经解决了，但我刚刚遇到了同样的问题，这里的答案无法适用于我的案例，因为评论中说明了滚动禁用，并且身体上的任何其他样式修改似乎都会影响结果。
经过实验，我发现这是由我的页面中的一个元素引起的，该元素被旋转并且它的高度成为移动设备上的障碍，因为它更接近主体的右端。
所以如果有人像我一样通过谷歌找到这个问题，我想添加这个答案：
此问题可能由多种因素引起，您可能需要调查您的组件之一的宽度是否在移动视图上没有成为问题。您的页面上可能有一个 div 太长，或者一个旋转的 div 超出了正文的边距。