Fullscreen Api

Causes an element and its children, if present, to take up the entire screen, and in the meantime, hide all browser UI and other applications from the screen

document.getElementById('test').requestFullscreen();
    使test元素占满屏幕

ResizeObserver Api

You can monitor the size change of an element on the page, including the change of display:none

<div ref="test"></div>
const test=ref(null)
const myObserver = new ResizeObserver((entries) => {
  entries.forEach((entry) => {
    console.log('被监听元素content的宽高及位置', entry.contentRect)
    // bottom: 700 指top + height的值
    // height: 600 指元素本身的高度，不包含padding，border值
    // left: 100 指padding-left的值
    // right: 1143 指left + width的值
    // top: 100 指padidng-top的值
    // width: 1043  指元素本身的宽度，不包含padding，border值
    // x: 100
    // y: 100
    console.log('被监听元素的宽高', entry.borderBoxSize)
    // blockSize: 1000
    // inlineSize: 1443
    console.log('被监听元素content部分的宽高', entry.contentBoxSize)
    // blockSize: 600
    // inlineSize: 1043
    console.log('被监听元素', entry.target)
  })
})
myObserver.observe(test)