html - CSS 百分比在移动设备上不正确

标签 html ios css

我有一个包含 3 个大容器的页面,它们都有一个 alpha 透明背景 它们在台式机上运行良好,但在平板电脑(iOS 和安卓)和 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 和高度而不是高度,但是 3 框在桌面浏览器和移动设备上工作正常,3 框重叠 1/2px 或者它们有一点 1/2px 空间

所有 3 个盒子都有相同的 PNG 和 alpha,重叠的地方颜色变深 如果我不能修复 % 可以找到一个解决方案(是可能的)只在移动设备上避免重叠而没有总和背景

最佳答案

确保设置元标记

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

这会将 100% 设置为 100%

关于html - CSS 百分比在移动设备上不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21192326/

相关文章:

css - 两个元素向右浮动后,一个元素向左浮动?

javascript - 让 HTML 表单使用 JSON API

javascript - 将 CSS 宽高比设置为宽度的倒数?

accessibility - 哪些语音阅读器支持 CSS3 语音属性?

iphone - 如何在其他应用程序中集成 aurioTouch 应用程序功能?

css - Materialise CSS 双自动对焦

javascript - 适用于 Wordpress 的 Cycle2,在移动设备上破坏 Cycle,在比移动设备更大的设备上重新初始化

javascript - 在 ContentEditable 中使用 Shadow DOM 创建 protected 文本 block

ios - 无法在allowsMultipleSelection 上取消选择预选的uicollectionviewcells

ios - 使 UIButton 在 TableView header 中可访问(可访问性)