MDN：全屏API提供了一种使用用户的整个屏幕显示Web内容的简单方法。此API允许您简单地控制浏览器，以便元素及其子元素（如果存在）占据整个屏幕，同时从屏幕上隐藏所有浏览器UI和其他应用程序。概述document.fullscreendocument.fullscreenElementdocument.fullscreenEnabledelem.requestFullscreendocument.exitFullscreendocument.onfullscreenchangedocument.onfullscreenerror属性document.fullscreen用于检测当前文档是否全屏，返回值为booleandocument.fullscreenEnablescreenElement是否全屏modecurrentlyactivateddocument.documentSupportfullscreenmethod请求全屏模式全屏请求应该由特定元素发送，以video元素为例，请求方法如下：varelem=document.getElementById("video");elem.addEventListener('click',function(){if(elem.requestFullscreen){elem.requestFullscreen();}});MDN:全屏请求必须在事件处理器中调用，否则会被拒绝。退出全屏模式一：按ESC或F11退出全屏模式二：[keydownevent]+document.exitFullscreen自定义全屏退出逻辑//回车退出全屏document.addEventListener("keydown",function(e){if(e.keyCode==13){document.exitFullscreen();}},false);注意：exitFullscreen方法只存在于document对象上，在elem事件onfullscreenchangeonfullscreenchange事件触发的瞬间不存在：一是进入全屏时，二是退出全屏时。也就是说，如果全屏模式的状态发生变化，就会触发onfullscreenchange事件当在元素上请求全屏时，将发生错误。该错误会触发onfullscreenerror事件document.onfullscreenerror=function(event){console.log("Fullscreenmodefailed");};验证onfullscreenerror事件最简单的方法是：在事件监听器之外发起一个全屏请求。因为全屏请求必须在事件处理函数中调用，否则会被拒绝。拒绝时会产生错误，该错误会触发onfullscreenerror事件document.onfullscreenerror=function(event){console.log("Fullscreenmodefailed");};//requestFullscreen()会失败，因为它在事件处理器之外document.documentElement.requestFullscreen();全屏样式Gecko会自动为进入全屏模式的元素添加额外的样式：width:100%;高度：100%l；目的是让它覆盖整个屏幕；而webkit并没有这个默认行为，所以我们需要手动添加这个样式#video:-webkit-full-screen{width:100%;height:100%;}兼容PC端mobile-side前缀表1表2结论本文大部分参考MDN文档，目的是整理Web全屏Api，非原创文章原文地址:https://www.guoyunfeng.com/20...
