html - 页面底部奇怪的空白(移动)

Question

我的客户报告说他的网站有一个奇怪的问题。该网站的 URL 是 your-montenegro.me

在 基于 Android 的浏览器 上加载时，页面底部会出现一个奇怪的空白区域。以下是屏幕截图:

• 华为升腾，Android 4.3:http://i60.tinypic.com/90vuyw.png
• HTC Desire S:http://i61.tinypic.com/2pyayk1.jpg

当我尝试打开这个网站时:

• Windows Phone 8.1 IE10:无空格
• 任何基于 Windows/Linux 的浏览器:无空格

你知道要尝试什么吗？

我试过播放 View browser viewports但无法提出解决方案。

编辑:

此外，当我第一次在 Huawei Ascend 上加载此页面时，网站看起来有点放大(完全没问题/符合预期)，但向下滚动仍然显示空白区域。

Edit2(截图):

华为升腾:

HTC 欲望 S

Answer 1

我使用下面的视口(viewport)测试了网站，它似乎可以解决问题。

<meta name="viewport" content="width=device-width, user-scalable=yes">

问题是因为大多数移动设备的 pixelRatio 为 2。这会导致您的强制高度 960px 变为 1920px，因为移动浏览器认为这就是您的意思。由于您的背景不是 960 像素，所以您会得到所有的空白区域。

我只使用 Chrome 模拟器对此进行了测试，您可以在 https://developer.chrome.com/devtools/docs/mobile-emulation 了解更多信息这让您可以轻松模拟大量移动设备。