Hey, 我是 沉浸式趣谈 本文首发于 [沉浸式趣谈] ，我的个人博客 https://yaolifeng.com 也同步更新。 转载请在文章开头注明出处和版权信息。 如果本文对您有所帮助，请点赞、评论、转发，支持一下，谢谢！
如何原生实现让任意 div 全屏展示 最近在做一个项目，需要实现点击按钮让某个 div 全屏展示的功能。 第一反应是用 CSS 设置 position: fixed 加上宽高 100%，但这样并不是真正的全屏，因为浏览器的工具栏还在。 后来发现浏览器原生就提供了 Fullscreen API ，可以让任意元素真正全屏展示，今天就来聊聊这个有趣的 API 。 基础用法：让元素全屏 先来看最简单的使用方式。假设我们有一个文章阅读器，想让用户能够专注阅读：
一篇很棒的文章
这是文章的正文内容...
就这么简单！调用元素的 requestFullscreen() 方法就能让它全屏展示了。不过要注意，这是个异步操作，返回的是 Promise ，所以最好加上 catch 来处理可能的错误。 退出全屏怎么搞？ 有进就要有出。退出全屏的方法也很简单，但这里有个小坑：退出全屏的方法是在 document 上调用，而不是在元素上： // 错误示范 ❌ reader.exitFullscreen();
// 正确方式 ✅ document.exitFullscreen().catch(err => { console.log('退出全屏失败:', err); });
来看个完整的示例，实现全屏切换功能： <!DOCTYPE html>