全屏api-requestFullScreen
js实现接口api requestFullScreen
// 语法 // 打开全屏 document.documentElement.requestFullScreen(); document.body.requestFullScreen(); dom.requestFullScreen(); //dom也可以全屏 //兼容写法 mozRequestFullScreen() webkitRequestFullScreen() msRequestFullscreen() // 退出全屏 document.exitFullscreen() // 兼容写法 mozCancelFullScreen() webkitCancelFullScreen() msExitFullscreen()
容易出现的坑：
浮窗组件什么的会在body或root绝对定位一个浮窗，
当某个dom开启全屏后，会脱离原有文档流，创建一个新的文档流。
为该dom或者dom子元素设置的浮窗仍在body/root中，设置定位。
这个定位的浮窗的定位不能在设置全屏dom的新文档流中使用，
现象就是看不到浮窗了。
解决办法：
1将需全屏的dom设置成最外层的，例如body，#app等。但如果局部全局的话，就不适用了。
2浮窗组件有的可以设置其填充的根节点。设置成全屏dom内的就相当于在全屏dom的文档流中了。
小结，了解全屏的原理，设置浮窗的根节点，根据不同场景设置不同解决办法。
原文：https://www.cnblogs.com/zctest/p/15198823.html