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;
}
您好最简单的方法,这就是我给它做的最大高度宽度的覆盖。像:
.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的特定样式来实现这一点,所以它不会破坏你的其他浏览器。
参考:http://css-tricks.com/snippets/css/ipad-specific-css/
在没有看到它,它很难说什么问题,但尝试使用上述CSS特定CSS适用于iPad的Safari浏览器。
即使设置了所有维度,也很难由于视口,确定并查询移动浏览器中的高度和宽度。 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
通过读取视口的大小或使其足够大以覆盖所有可能的页面大小
查看我对类似问题的回答,可能会有所帮助http://*.com/questions/8205812/jquery-js-ios-4-and-document-height-problems – 2013-03-30 11:43:56