I try to create 3 divs that covers whole space on mobile browser.I occurred little problem.With this styles: \[code\]<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>\[/code\]And this html code:\[code\]<body> <div id="first-player" class="game-button"></div> <div id="lights"></div> <div id="second-player" class="game-button"></div></body>\[/code\]http://imgur.com/MBXDawPThis effect sometimes (on one on my phones) doesn't exists when i delete :\[code\]<meta name="viewport" content="user-scalable=no" />\[/code\]Here is the page http://twigit.pl/game.html \[code\]with <meta name="viewport" content="user-scalable=no"/>\[/code\]http://twigit.pl/game2.html \[code\]withOUT <meta name="viewport" content="user-scalable=no"/>\[/code\]
Android Browser relative height inaccuracy
- Thread starter Stru4nak
- Start date