Mobile-Chrome中网页底部的神秘白色空间 [英] Mysterious White Space at bottom of Web Page in Mobile-Chrome

问题描述

我在SO上查看了很多页面底部的神秘空白问题，并且多次使用了 viewport 标签，但我仍然无法找出我做错了什么！

有问题的网页是：

任何关于我做错的想法

编辑：

设置 ANY 初始缩放很差新闻！它使字体太小了！
看一看：

理想的移动外观，同时保持桌面和平板电脑是这样的：

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

解决方案

这似乎解决了问题： / p>

1. 更改< meta name =viewportcontent =width = device-width> 到< meta name =viewportcontent =width = device-width，initial-scale = 1.0> 。


2. 在您的手机CSS中覆盖 width：25em; 在 .sub_container_div 上，以便容器与如果你不希望字体缩放，那么看起来只需要添加 initial-width。
scale = 0 也可以。但是，这会使文本很难阅读。你可以玩不同的比例，但似乎只是设置它可以解决你的问题。



I've looked at many "mysterious white-space at bottom of page" issues here on SO, and played with the viewporttag many times, but I still cannot figure out what I'm doing wrong!

The page in question is: http://www.seniorchoicesunl.com/error_documents/error401.php

Here's what it looks like on mobile from Chrome Dev Tools:

Any Ideas on what I'm doing wrong?

Edit:

setting ANY initial-scale is bad news! It makes the font too tiny! Take a look:

The desired mobile look, while keeping the desktop and tablets as-is, is this:

P.S. Fixing this issue could reciprocally fix other related issues I'm having with other webpages.

解决方案

This seems to fix the problem:

1. Change <meta name="viewport" content="width=device-width"> to <meta name="viewport" content="width=device-width,initial-scale=1.0">.
2. Override width: 25em; on .sub_container_div in your mobile CSS so that the container scales with the width of the view.

If you do not want the font to scale, it seems just adding initial-scale=0 will work as well. However, this will make the text very hard to read. You can play around with different scales, but it seems just setting it will fix your issue.

这篇关于Mobile-Chrome中网页底部的神秘白色空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！