在iPad视口中保持jQuery模式

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

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

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

 #lightbox {position：fixed;  / *将灯箱窗口保持在当前视口中* / top：0; 左：0; 宽度：100％; 高度：100％;  z-index：2;  background-color：rgba（0,0,0,0.2）;  font-weight：100; 保证金：0 0 .1em 0; 颜色：＃f8ef71;  text-shadow：1px 1px 1px＃af7913;  text-align：center;  } 

Answer 1

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

您将面临的另一个难点是：固定是它相对于窗口而不是视口，因此当缩放时，元素将不会出现您想要的样子。 这就是为什么他们在android 2.3中禁用固定而不禁用缩放（或者我相信），虽然他们在后来的Android版本中改变了这个位置。

这是一个相关的问题： CSS“position：fixed;” 在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）'，
                 '位置'：'绝对'，
                 'top'：$（document）.scrollTop（）
             };

             $（ '＃collections'）的CSS（cssObj）;
             $（window）.scroll（function（）{$（'＃lightbox'）。animate（{top：$（document）.scrollTop（）}，300）;}）;
         };