iPad Safari 100% 高度问题答案

【问题标题】：iPad Safari 100% height issueiPad Safari 100% 高度问题
【发布时间】：2011-08-09 10:16:25
【问题描述】：

我的页面上有一个模态 div，它使背景变灰。如果我将覆盖 div 的高度设置为 100%，它在 IE（桌面）上可以正常工作，但在 iPad Safari 上，完整高度不会变灰。究竟是什么问题？它与固定位置/视口有关吗？请帮忙。下面是相同的 CSS；

#TB_overlay {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
.TB_overlayBG {
    background-color: #000000;
    opacity: 0.4;
}

【问题讨论】：

检查我对类似问题的回答，可能会有所帮助stackoverflow.com/questions/8205812/…

标签： css ipad mobile-safari

【解决方案1】：

需要设置设备的高度和宽度，你可以使用iPad特有的样式来实现，这样就不会破坏你的其他浏览器。

参考：http://css-tricks.com/snippets/css/ipad-specific-css/

没有看到它，很难确切地说出问题出在哪里，但请尝试使用上述 css 将特定 css 应用于 iPad Safari。

【讨论】：

即使设置了所有尺寸，也很难在移动浏览器中确定和查询高度和宽度，因为存在视口。视口与“普通”（桌面）浏览器上的窗口大小不同。这就是 position: fixed; 在移动浏览器上无法正常工作的原因。
@Rudie，+1。需要相当多的数学知识。在iOS中，我们也有不同dpi的问题（iPhone4更高）。在 Android 浏览器中，我们可以读取 dpi 数字并在那里进行数学运算。
所以你本质上是说动态确定设备高度并相应地设置覆盖 div 的高度是不可能的？还有其他方法吗？

【解决方案2】：

您好，最简单的方法就是为叠加层提供最大高度宽度。喜欢：

.overlay{
 position: fixed;
 display: none;
 top: 0;
 left: 0;
 z-index: 99;
 width: 10000px;
 height: 10000px;
 opacity: 0.5;
 background: #ccc;
}

您可以将其放在底部，即body 标签之前，并将其display 更改为block，只要您想使背景变灰。显然，无论你想在上面显示什么，都必须有一个更大的z-index。希望这可以帮助。如果你不明白，请告诉我。

【讨论】：

这对于台式机和 iPad 都可以正常工作，并且不会创建大滚动条，因为我们使用的是大高度..
它可以工作并且不会创建滚动条，因为位置是固定的。你可以试一试。
是否需要使用 position: fixed;或位置：绝对；对于覆盖 div？
此覆盖 div 必须位于 fixed 位置。但它上面的模态 div 可能是绝对的。

【解决方案3】：

您的问题：

大部分移动浏览器都会忽略position:fixed
窗口大小和视口大小的处理方式不同，因此position:absolute;... 技巧也不起作用——您必须通过读取视口大小在脚本中动态调整div 的大小，或者使其大到足以覆盖所有可能的页面大小

【讨论】：