Android浏览器相对高度不准确

我尝试创建3个覆盖整个手机浏览器空间的div。Android浏览器相对高度不准确

我发生了小问题。

有了这个风格：

<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>

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

截图：（可以看出只有在黑暗的背景，所以我链接到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"/>

来源

2013-03-23 Paul Brewczynski

一些移动浏览器会自动缩放，除非你告诉他们，否则。有什么问题？

编辑：你也应该设置视

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

，并检查了这一点

http://html5boilerplate.com/mobile/

来源

2013-03-23 17:52:25 beardedlinuxgeek

http://jsbin.com/exorat/13 < - 即使这样视离开“尽管覆盖100％的高度由css – 2013-03-23 18:24:27

白色酒吧“底部”问题是“底部的白色条” – 2013-03-23 18:26:11

Android浏览器相对高度不准确

回答

相关问题