移动设备上的CSS百分比不正确

时间:2014-01-17 17:38:20

标签: html ios css

我有一个有3个大容器的页面,所有这些都有alpha透明背景 它们在桌面上工作正常,但在平板电脑(iOS和Android)和iphone上,%和似乎不正确

<div style="position: fixed; top: 0; left: 0; right: 0; height: 10%;"> CONTAINER 1 </div>
<div style="position: fixed; top: 10%; left: 0; right: 0; bottom: 5%;"> CONTAINER 2 </div>
<div style="position: fixed; bottom: 0; left: 0; right: 0; height: 5%;"> CONTAINER 3 </div>

我也尝试在容器1和3处分配bootm和height而不是高度但是3盒在桌面浏览器上工作正常n移动3盒重叠为1 / 2px或者它们有一点1/2空间

所有3个框都有相同的带有alpha的PNG,重叠的颜色会变暗 如果我不能解决%可以找到一个解决方案(是可能的)只在移动设备上重叠而没有和背景

4 个答案:

答案 0 :(得分:2)

确保设置元标记

<meta name="viewport" width="device-width" />

这将设置100%至100%

答案 1 :(得分:0)

你的div还有填充吗?

默认情况下,CSS的百分比宽度不包括大多数浏览器的填充。例如,如果宽度为25%,填充为5px,则div的实际宽度为25%+ 5px。

boxsizing:border-box属性会导致大多数浏览器(值得注意的例外是IE7)将宽度视为填充的包含 - 所以25%宽度div与5px填充将是25%

答案 2 :(得分:0)

试试这个:

<div style="position: fixed; top: 0; left: 0; right: 0; bottom:90%;"> CONTAINER 1 </div>
<div style="position: fixed; top: 10%; left: 0; right: 0; bottom: 5%;"> CONTAINER 2 </div>
<div style="position: fixed; bottom: 0; left: 0; right: 0; top: 95%;"> CONTAINER 3 </div>

问题是%是平均到最接近的全像素数。您可能只有一个像素的间隙,并且一次像素重叠。

然后你可以用另一种方式尝试:

<div style="position:fixed;top:0;left:0;right:0;bottom:0;padding:10% 0 5%;box-sizing:border-box;background:yellow">
    <div style="position:absolute;top:0;left:0;right:0;height:10%;background:rgba(0,0,0,0.3);">5% top</div>
<div style="height:100%;background:rgba(0,0,0,0.3);"> middle </div>
<div style="position:fixed;right:0;left:0;bottom:0;height:5%;background:rgba(0,0,0,0.3);">bottom:5%</div>
</div>

如果你提供了一个编码器或小提琴,那对我们所有人来说都会容易得多

答案 3 :(得分:0)

它确实在移动浏览器上不起作用,但在Android选项卡检查

上工作正常

http://devilspc.in/stackoverflow/css-value.html