Fullscreen Api

最新推荐文章于 2025-06-14 09:00:02 发布

原创最新推荐文章于 2025-06-14 09:00:02 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

文章介绍了如何使用JavaScript的requestFullscreen方法使元素占据整个屏幕，同时利用ResizeObserverAPI来监听并响应页面元素尺寸的变化，包括display属性为none的情况。这种方法可以用于创建沉浸式用户体验并精确控制布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用

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

ResizeObserver Api

可以监听页面上某个元素的尺寸变化，包括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)