页面底部有奇怪的空白（手机）

Question

我的客户报告了他网站的问题。网站的网址为your-montenegro.me

当页面底部加载基于Android的浏览器时，会出现一个空白空格。以下是截图：

• 华为Ascend，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的浏览器：无空格

你知道该尝试什么吗？

我尝试过播放视图browser viewports，但无法提供解决方案。

编辑：

此外，当我第一次在华为Ascend上加载此页面时，网站显示有点放大（完全正常/预期），但向下滚动仍会显示空白区域。

Edit2（截图）：

华为Ascend：

HTC Desire S

Answer 1

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

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

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

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