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

【问题标题】：Mysterious White Space at bottom of Web Page in Mobile-ChromeMobile-Chrome中网页底部的神秘空白
【发布时间】：2020-12-18 20:17:23
【问题描述】：

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

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

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

关于我做错了什么有什么想法吗？

编辑：

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

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

附：解决此问题可以相互解决我在其他网页上遇到的其他相关问题。

【问题讨论】：

尝试高度：某个值大于移动设备长度
我无法设置准确的高度，否则页面将无法响应屏幕旋转。必须有一种更智能的符合标准的方式。
你能暂时关闭自动重定向吗？每 30 秒按一次后退按钮很烦人。
会的！让我现在就做！给我2分钟。
自动重定向暂时被注释掉（即禁用）！

标签： html css viewport mobile-chrome

【解决方案1】：

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

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

它为我修复了错误。

【讨论】：

天哪，这似乎修复了这个错误 - 我正在寻找一个很长的时间来修复它。
但是对于 ios 你需要删除 overflow-x: hidden; bcs你不能平滑滚动
你太棒了！这也为我解决了问题

【解决方案2】：

这里发生了什么：

您已设置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 规范语言中，这是最初的包含块）。

【讨论】：

刚刚尝试过，添加max-width:37em; 以在桌面上保持所需的、一致的水平矩形形状。不过，在移动设备上，它看起来有点奇怪，因为字母很大，而且标准的矩形消息框形状被转换成细长的形状。
初始规模最终确实有所帮助（initial-scale:0.7 非常完美！）。这个问题已正式解决（为了“完美错误文档”脚本。我会立即更新该脚本使用新的响应式和移动友好的代码。虽然，它可能对每个人都不一样），通过提供的答案的组合。但是您的答案是最具描述性和全面性的，因此，如果您只是添加我使用的额外代码，以使一切正常，我很乐意将您的答案标记为已选择，并更正一个！谢谢大卫！
其实说得太快了。现在它在平板电脑上看起来太小了！ :-( 我正在使用三星 Galaxy Tab S 进行测试。
如果initial-scale:0.7 仍然有所作为，那么您的内容仍然比初始包含块宽，并且您通过缩小来掩盖问题。您应该确保所有元素都包含在 DevTools 中的 <body> 元素中，方法是将鼠标悬停在 body 上并查看其框外是否有任何内容。根据您想要达到的效果，可能值得使用媒体查询来根据屏幕大小更改字体/对话框大小。
基本上，我想说的是，通过允许缩小，浏览器进入了一种适用于旧版桌面页面的模式，并且浏览器之间的互操作性和古怪的功能很差。尝试将minimum-scale=1 添加到视口元标记并从那里开始工作以使页面看起来正确。

【解决方案3】：

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

我通过删除 body 标签上的height: 100vh 解决了这个问题。

【讨论】：

【解决方案4】：

这似乎解决了问题：

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

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

【讨论】：

很遗憾，这不起作用，因为.sub_container_div 无法更改。这部分代码已经完善，以使对话框完全位于桌面的页面中间（尽管窗口宽度）。我一直在寻找一种解决方案，它只会修改页面的“移动”视图，因为其他一切都近乎完美。
嗯，这取决于你想要什么。如果您希望视图对移动设备友好，您当然可以对覆盖桌面宽度的小屏幕进行媒体查询，而不会影响它在桌面上的外观。如果您只想要桌面视图（带有微小的、不适合移动设备的字体），您可以将initial-scale 设置为0 以在手机上获取桌面视图。
你可以在没有媒体查询的情况下做到这一点，并且仍然可以在桌面上工作：.sub_container_div{ width:auto; max-width:25em } 无论如何initial-scale=1.0 是要走的路。享受吧！
我错过了什么吗？我虽然我们在这里谈论身高。宽度工作得很好。它在桌面和移动设备上都能很好地填写页面。
将初始比例更改为 1 后，宽度将不起作用...这就是您错过的 ;)

【解决方案5】：

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

【讨论】：