我尝试在移动浏览器上创建 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" />
这是页面
with <meta name="viewport" content="user-scalable=no"/>
withOUT <meta name="viewport" content="user-scalable=no"/>
最佳答案
某些移动浏览器会自动缩放，除非您另有说明。有什么问题？
编辑:您还应该设置视口(viewport)
<meta name="viewport" content="width=device-width, initial-scale=1">
检查一下
关于css - Android浏览器相对高度不准确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15590102/