全屏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的文档流中了。

小结，了解全屏的原理，设置浮窗的根节点，根据不同场景设置不同解决办法。

标签：body,requestFullScreen,dom,api,全屏,设置,浮窗
来源： https://www.cnblogs.com/zctest/p/15198823.html