Mobile-Chrome 网页底部的神秘空白

Question

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

这是 Chrome Dev Tools 在移动设备上的样子：

关于我做错了什么的任何想法？

编辑：

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

在保持台式机和平板电脑原样的同时，所需的移动外观是这样的：

PS 解决这个问题可以反过来解决我在其他网页上遇到的其他相关问题。

Answer 1

将此添加到您的 css 文件之上:)

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

它为我修复了错误。

Answer 2

这似乎可以解决问题：

改成。<meta name="viewport" content="width=device-width"><meta name="viewport" content="width=device-width,initial-scale=1.0">
width: 25em;在移动 CSS中覆盖.sub_container_div，以便容器随视图宽度缩放。

如果您不希望字体缩放，似乎只添加initial-scale=0也可以。然而，这将使文本变得非常难以阅读。您可以使用不同的比例，但似乎只需设置它就能解决您的问题。