Question

我尝试在移动浏览器上创建覆盖整个空间的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

当我删除时，有时（在我的手机上的一个）效果不存在：

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

Answer 1

除非您另行说明，否则某些移动浏览器会自动缩放。有什么问题？

编辑：你还应该设置视口

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

并检查出来

http://html5boilerplate.com/mobile/

Android浏览器相对高度不准确

1 个答案: