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瀏覽器相對高度不準確

回答

相關問題