在iPad视口中保持jQuery模式

Question

我写了一个相当直接的前进jQuery模式，因为我不想要任何重量。除了iPad之外，该模式适用于所有浏览器。

如果我在页面底部并点击打开灯箱，它将在页面顶部打开，不在视野范围内。

我没有使用jQuery来定位窗口只是纯粹的css任何人都可以看到为什么这可以在除了iPad之外的所有其他浏览器中工作？

#lightbox {
    position:fixed; /* keeps the lightbox window in the current viewport */
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.2);
    font-weight: 100;
    margin: 0 0 .1em 0;
    color: #f8ef71;
    text-shadow: 1px 1px 1px #af7913;
    text-align: center;
}

Answer 1

位置：修复不是普遍支持的，我认为你的iOS版本低于版本5，这是第一个支持它的iOS版本？这种模式也不会出现在IE6＆amp; 7上。它也不会在Android 2.3及更少的中使用通过视口元标记禁用缩放。

你要面对位置的另一个困难：固定是它相对于窗口，而不是视口，因此当缩放时，元素将不会出现你想要的方式。这就是为什么他们在没有禁用缩放（或者我相信）的情况下在android 2.3中禁用固定的原因，尽管他们在以后的Android版本中改变了这个位置。

这是一个相关的问题： CSS "position: fixed;" on iPad/iPhone?

Answer 2

感谢Ed Kirk警告我iOS版本5中的位置修复问题

我写了一个小JS来解决我的问题

if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod')
        {
            var cssObj = {
                'background-color' : 'rgba(0, 0, 0, 0)',
                'position' : 'absolute',
                'top' : $(document).scrollTop()
            };

            $('#lightbox').css(cssObj);
            $(window).scroll(function() {$('#lightbox').animate({top: $(document).scrollTop()}, 300);});
        };