0

モバイルブラウザのスペース全体をカバーする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

私が削除したとき、この効果は時々（私の電話の1つに）存在しません：

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

1 に答える 1

0

一部のモバイルブラウザは、特に指示がない限り、自動スケーリングされます。どうしたの？

編集：ビューポートも設定する必要があります

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

そしてこれをチェックしてください

http://html5boilerplate.com/mobile/

于 2013-03-23T17:52:25.600 に答える