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

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

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

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

基础用法：让元素全屏

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

    

        
一篇很棒的文章
        
这是文章的正文内容...
    					
					

						

						
原文链接：前端 掌握这个 API，让你的网页展示效果提升 10 倍，转发请注明来源！