Android浏览器相对高度不准确答案

【问题标题】：Android Browser relative height inaccuracyAndroid浏览器相对高度不准确
【发布时间】：2013-03-13 11:25:28
【问题描述】：

我尝试在移动浏览器上创建 3 个覆盖整个空间的 div。

我出了点小问题。

使用这种样式：

<style>
            body, html {
              width:100%;
              height:100%;
              padding: 0;
              margin: 0;

            }

            .game-button {
              width:100%;
              padding:0;
              margin: 0;
              height:40%;       // 2*40% = 80%;


            }

            #first-player {
              background-color: #ff0000;
            }

            #second-player {
              background-color: #00ff00;
            }


            #lights {
              padding: 0;
              margin: 0;
              height:20%;
            }
</style>

还有这个html代码：

<body>
      <div id="first-player" class="game-button"></div>
      <div id="lights"></div>
      <div id="second-player" class="game-button"></div>
</body>

尽管在 CSS 中覆盖了 100% 的高度，但问题是“屏幕底部的白条”。

截图：（只能在深色背景下看到，所以我链接到 imgur）：
http://imgur.com/MBXDawP

这种效果有时（在我的手机上）在我删除时不存在：

<meta name="viewport" content="user-scalable=no" />

这是页面

http://twigit.pl/game.html

with <meta name="viewport" content="user-scalable=no"/>

http://twigit.pl/game2.html

withOUT <meta name="viewport" content="user-scalable=no"/>

【问题讨论】：

标签： css mobile android-browser

【解决方案1】：

除非您另有说明，否则某些移动浏览器会自动缩放。有什么问题？

编辑：您还应该设置视口

<meta name="viewport" content="width=device-width, initial-scale=1">

看看这个

http://html5boilerplate.com/mobile/

【讨论】：

jsbin.com/exorat/13
问题是“底部的白条”