javascript - 如何适应高度为 :100% on iPhone 的 DIV

Question

我在屏幕外隐藏了一个 .contact div，如下所示:

#contact {
  position: absolute;
  box-sizing:border-box;
  width:100%;
  top:100%;
  z-index: 10;
  background: $sdpblack;
  padding: $gutter;

  /* Media query for handheld devices */
  @include max-screen($palm) {
     height:100%;
     display:table;
     padding-left:0; //Because we just switched to table display
  }
}

当用户点击一个按钮时，我使用 jQuery 像这样向上滑动表单:

$scope.contactIsUp = false;
$scope.toggleContact = function( event ) {
    speedup = 500;
    speeddown = 300;
    if ( $scope.contactIsUp ) { //lowering
        $('#contact').animate({'margin-top':0},speeddown, function(){ //who cares });
    } else { //raising
        var height = $('#contact').outerHeight();
        alert('css height: '+$('#contact').css('height'));
        alert('height: '+height);
        alert( 'window.outerHeight: '+$(window).outerHeight() );
        alert( 'window.innerHeight: '+$(window).innerHeight() );
        $('#contact').animate({'margin-top':'-='+height},speedup);
        $scope.contactIsUp = true;
    }
    event.preventDefault();
}

我使用负 margin-top 将 div 引入 View ，因为最终位置因屏幕尺寸而异。在桌面上，div 位于窗口的底部边缘。在智能手机上，它从上到下填满屏幕。

问题:在 iPhone 上，联系人表单向上滑动到距顶部 36 像素处停止。这在 iPad 上似乎不是问题。

为什么会发生这种情况，我该如何解决？

注意:我真的不想求助于嗅探客户端。恶心!

Answer 1

罪魁祸首是 box-sizing:border-box;

框大小:边框框；如果您的 css 没有边距或填充会使您的 body 超出窗口限制，那么这并不是真正必要的。这是一个很好的依赖工具，但如果你的 css 是干净的，你真的不需要它。我会把它拿出来，确保没有任何填充或边距溢出窗口限制。我会使用 translate3d() 而不是 top:100%。它硬件加速滑动等动画，并使它们看起来更好。