ResizeObserverEntry: thuộc tính devicePixelContentBoxSize

Giá trị

Một mảng chứa các đối tượng với kích thước mới của phần tử được quan sát tính bằng điểm ảnh thiết bị. Mảng này là cần thiết để hỗ trợ các phần tử có nhiều fragment, xuất hiện trong các tình huống nhiều cột. Mỗi đối tượng trong mảng chứa hai thuộc tính:

blockSize

Kích thước content-box, tính bằng điểm ảnh thiết bị, theo chiều block của phần tử được quan sát. Với các hộp có writing-mode ngang, đây là chiều dọc, tức chiều cao; nếu writing-mode là dọc, đây là chiều ngang, tức chiều rộng.

inlineSize

Kích thước content box, tính bằng điểm ảnh thiết bị, theo chiều inline của phần tử được quan sát. Với các hộp có writing-mode ngang, đây là chiều ngang, tức chiều rộng; nếu writing-mode là dọc, đây là chiều dọc, tức chiều cao.

Ví dụ

Ví dụ sau được lấy từ bài viết Pixel-perfect rendering with devicePixelContentBox. Vì hàm callback của một ResizeObserver được gọi sau layout nhưng trước paint, điều này tạo cơ hội để ghi lại kích thước chính xác tính bằng điểm ảnh vật lý nhằm bảo đảm ánh xạ một-một giữa điểm ảnh của canvas và điểm ảnh vật lý.

const observer = new ResizeObserver((entries) => {
  const entry = entries.find((entry) => entry.target === canvas);
  canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
  canvas.height = entry.devicePixelContentBoxSize[0].blockSize;

  /* ... render to canvas ... */
});
observer.observe(canvas, { box: "device-pixel-content-box" });

Thông số kỹ thuật

Tương thích trình duyệt