0

I try to create 3 divs that covers whole space on mobile browser.

I occurred little problem.

With this styles: 

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

And this html code:

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

The problem is the "white bar on the bottom of the screen" despite covering 100% of height in CSS.

Screenshot: ( it could be seen only on dark background so I link to imgur):
http://imgur.com/MBXDawP

This effect sometimes (on one on my phones) doesn't exists when I delete :

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

Here is the page

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"/>
4

1 回答 1

0

Some mobile browsers will auto-scale unless you tell them otherwise. What's the problem?

EDIT: you should also set the viewport

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

and check this out

http://html5boilerplate.com/mobile/

于 2013-03-23T17:52:25.600 回答