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

Question

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

有问题的页面是：http ://www.seniorchoicesunl.com/error_documents/error401.php

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

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

编辑：

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

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

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

score 14 · Accepted Answer

将此添加到您的 css 文件顶部:)

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

它为我修复了这个错误。

score 3 · Accepted Answer

这里发生了什么：

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

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

score 2 · Accepted Answer

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

我通过删除height: 100vhbody标签解决了这个问题。

score 1 · Accepted Answer

这似乎可以解决问题：

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

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

score 0 · Accepted Answer

在我的情况下，一个元素对于移动屏幕来说太长了，它破坏了 webflow。在我缩短长元素的宽度后，额外的白屏也从页脚中移除。

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

5 回答 5

Related

Reference