我有一个有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,重叠的颜色会变暗 如果我不能解决%可以找到一个解决方案(是可能的)只在移动设备上重叠而没有和背景
答案 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选项卡检查
上工作正常