iPad Safari 100％高度问题

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

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

来源

2011-04-20 testndtv

查看我对类似问题的回答，可能会有所帮助http://stackoverflow.com/questions/8205812/jquery-js-ios-4-and-document-height-problems – 2013-03-30 11:43:56

您好最简单的方法，这就是我给它做的最大高度宽度的覆盖。像：

.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。希望这可以帮助。如果你不明白，让我知道。

来源

2011-04-20 11:42:33

这个工作是否适用于桌面和iPad都不错，它会不会创建一个大的滚动条，因为我们正在使用一个很大的高度。 – testndtv 2011-04-20 11:48:46

它的工作原理并不会创建一个滚动条，因为位置是固定的。你可以试试看。 – 2011-04-20 11:51:01

我需要使用position：fixed; OR位置：绝对;覆盖div？ – testndtv 2011-04-20 12:01:04

设备高度和宽度需要进行设置，你可以使用iPad的特定样式来实现这一点，所以它不会破坏你的其他浏览器。

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

在没有看到它，它很难说什么问题，但尝试使用上述CSS特定CSS适用于iPad的Safari浏览器。

来源

2011-04-20 11:37:55

即使设置了所有维度，也很难由于视口，确定并查询移动浏览器中的高度和宽度。 Viewport与“普通”（桌面）浏览器上的窗口大小不同。这就是为什么'position：fixed;'在移动浏览器上无法正常工作的原因。 – Rudie 2011-04-20 11:41:55

@Rudie，+1。相当多的数学是必需的。在iOS中，我们也有不同dpi的问题（iPhone4更高）。在Android浏览器中，我们可以读取dpi数字并在那里进行数学运算。 – 2011-04-20 11:51:18

所以你基本上是说动态地确定设备高度并相应地设置覆盖div的高度是不可能的？有没有其他方法？ – testndtv 2011-04-20 13:15:43

您的问题：

大多数移动浏览器忽略position:fixed
窗口大小和视大小不同的处理，所以position:absolute;...招不也行 - 你必须动态地调整您div通过读取视口的大小或使其足够大以覆盖所有可能的页面大小

来源

2011-04-20 11:48:51

iPad Safari 100％高度问题

回答

相关问题