Zurb Foundation 6揭示了模态在移动设备上增加了垂直间距

Question

我正在使用Zurb Foundation 6.3.0，并且遇到以下问题。在桌面和响应模式下都以chrome打开时，揭示模式会收到以下内联样式。

element.style {
    display: block;
    top: 0px;
    left: 0px;
    margin: 0px;
}

但是，如果我使用Android设备的远程调试功能打开网站，则内联样式设置如下。

element.style {
    display: block;
    top: 60px;
    left: 0px;
    margin: 0px;
}

这会使模态比应往下移60px，并在模态后面显示内容。是什么导致内联样式在android设备上的设置不同？

这是通过以下方式进行的计算的结果foundation.reveal.js：

var height = this.$element.outerHeight();
var outerHeight = $(window).height();

if (this.options.vOffset === 'auto') {
  if (height > outerHeight) {
    top = parseInt(Math.min(100, outerHeight / 10), 10);
  } else {
    top = parseInt((outerHeight - height) / 4, 10);
  }
}

如果元素高度大于窗口高度，则会将top元素的属性设置为窗口高度的1/10。如果元素高度不大于元素高度，则将该top值设置为窗口高度和元素高度之差的1/4。

在这种情况下，元素的高度被计算为大于窗口高度（即使应将其设置为100vh）。因此，将元素的位置设置为窗口高度的〜1/10。

Answer 1

此问题也在此答案中得到解决：CSS3 100vh在移动浏览器中不是常数。

为了防止模态元素具有top大于0 的值，请向元素添加属性`data-v-offset =“ 0”'，如下所示：

<div class="full reveal" data-reveal data-v-offset="0">
  <!-- content -->
</div>

如果将设置为，这将强制top属性的值为，0因为foundation.reveal.js _updatePosition不会在函数中进行计算。data-v-offset0

Zurb Foundation文档中进一步介绍了此选项和其他插件选项。