掌握这个API,让你的网页展示效果提升10倍

  • o Hey, 我是 沉浸式趣谈
  • o 本文首发于 【沉浸式趣谈】,我的个人博客 https://yaolifeng.com 也同步更新。
  • o 转载请在文章开头注明出处和版权信息。
  • o 如果本文对您有所帮助,请点赞、评论、转发,支持一下,谢谢!

如何原生实现让任意 div 全屏展示

最近在做一个项目,需要实现点击按钮让某个 div 全屏展示的功能。

第一反应是用 CSS 设置 position: fixed 加上宽高 100%,但这样并不是真正的全屏,因为浏览器的工具栏还在。

后来发现浏览器原生就提供了 Fullscreen API,可以让任意元素真正全屏展示,今天就来聊聊这个有趣的 API。

基础用法:让元素全屏

先来看最简单的使用方式。假设我们有一个文章阅读器,想让用户能够专注阅读:

一篇很棒的文章

这是文章的正文内容...