移动Chrome中网页底部的神秘白色空间

Question

我在SO上看了许多“页面底部的神秘空白”问题，并多次使用viewport标签，但我仍然无法弄清楚我做错了什么！

相关网页是：http://www.seniorchoicesunl.com/error_documents/error401.php

以下是Chrome开发工具在移动设备上的显示效果：

关于我做错的任何想法？

编辑：

设置 ANY initial-scale是个坏消息！它使字体太小了！ 看一看：

所需的移动外观，同时保持桌面和平板电脑的原样，是：

P.S。修复此问题可以相互修复我在其他网页上遇到的其他相关问题。

Answer 1

在你的css文件上添加它：）

html,body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

它为我修复了这个错误。

Answer 2

这似乎解决了这个问题：

1. 将<meta name="viewport" content="width=device-width">更改为<meta name="viewport" content="width=device-width,initial-scale=1.0">。
2. 覆盖移动CSS中width: 25em;上的.sub_container_div，以便容器根据视图的宽度进行缩放。

如果您不希望缩放字体，似乎只需添加initial-scale=0即可。但是，这将使文本很难阅读。您可以使用不同的比例，但似乎只是设置它将解决您的问题。

Answer 3

这里发生了什么：

• 您已设置width=device-width，这会使您网页上的版面尺寸等于设备的屏幕宽度。即，使元素100％将使其具有与屏幕相同的宽度。
• Chrome使用宽度和屏幕的宽高比推断布局高度。即height = width / aspectRatio
• sub_container_div元素实际上最终比页面的布局宽度宽得多。在我的Nexus 6中，设备宽度为412px，而sub_container_div为594px宽。
• 由于内容比设备宽度宽，因此Chrome允许缩小并以最小缩放级别加载页面，但这不会更改布局宽度/高度，因此高度100％仅填充device-width/aspect ratio像素，它不会填充缩小的视口。

解决此问题的正确方法是确保所有内容都包含在布局大小中。在您的情况下，sub_container_div比布局大小宽的原因是您的填充/边距使其扩展到父级之外。解决方案是将box-sizing: border-box添加到sub_container_div和对话框元素，将width: 100%添加到sub_container_div。这样，Chrome无法缩小，您无法在布局框外看到（使用HTML规范语言，这是初始包含块）。

Answer 4

我在Chrome 77上遇到了相同的问题

我通过删除正文标签上的height: 100vh解决了该问题。

Answer 5

在我的情况下，一个元素对于手机屏幕来说太长了，它破坏了网络流。缩短长元素的宽度后，多余的白色屏幕也从页脚中删除。