为什么 ResizeObserver 的borderBoxSize 是一个数组

Question

当我使用 ResizeObserver 我创建一个 ObserverCallBack 像

public handleCallBack: ResizeObserverCallback = entries => {
    entries.forEach(entry => {
    // get new size
    const newWidth = entry.borderBoxSize.inlineSize
    })
}

但是borderBoxSize的类型是ResizeObserverSize的ReadonlyArray

我应该将我的代码更改为borderBoxSize [0]

我很好奇为什么borderBoxSize需要是一个数组，当它的长度会大于1

Answer 1

根据https://drafts.csswg.org/resize-observer/#dom-resizeobserverentry-borderboxsize上的说明，它还不会发生，但会在未来版本的规范中发生：

盒子大小属性公开为 FrozenArray 以支持具有多个片段的元素，这些片段发生在多列场景中。 然而，内容矩形和边框框的当前定义没有提及这些框如何受多列布局的影响。 在本规范中，FrozenArray 中只会返回一个 ResizeObserverSize，它对应于第一列的维度。 该规范的未来版本将扩展返回的 FrozenArray 以包含每个片段的大小信息。