Zurb Foundation 6 reveal modal 在移动设备上增加了垂直间距

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);
  }
}

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

在这种情况下，元素的高度被计算为大于 window 高度（即使它应该设置为 100vh）。因此，元素的位置被设置为 window 高度的 ~ 1/10。

Answer 1

这个问题也在这个答案中解决：。

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

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

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

Zurb Foundation docs.

中进一步介绍了此插件选项和其他插件选项

Zurb Foundation 6 reveal modal 在移动设备上增加了垂直间距

Zurb Foundation 6 reveal modal adds vertical spacing on mobile devices

html

javascript

css

mobile

zurb-foundation