为什么 ResizeObserver 的 borderBoxSize 是一个数组

Question

当我使用 ResizeObserver 时，我创建了一个像

这样的 ObserverCallBack

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

但是borderBoxSize的类型是ReadonlyArray of ResizeObserverSize

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

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

Answer 1

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

The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments, which occur in multi-column scenarios. However the current definitions of content rect and border box do not mention how those boxes are affected by multi-column layout. In this spec, there will only be a single ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column. A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.

为什么 ResizeObserver 的 borderBoxSize 是一个数组

Why borderBoxSize of ResizeObserver is a Array

javascript

frontend

typescript-typings