gpt4 book ai didi

css - Android浏览器相对高度不准确

转载 作者:行者123 更新时间:2023-11-28 13:10:27 30 4
gpt4 key购买 nike

我尝试在移动浏览器上创建 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"/>

最佳答案

某些移动浏览器会自动缩放,除非您另有说明。有什么问题?

编辑:您还应该设置视口(viewport)

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

检查一下

http://html5boilerplate.com/mobile/

关于css - Android浏览器相对高度不准确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15590102/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com