FullScreen实现全屏和分屏

项目场景：

项目场景：在项目中使用JS去实现页面的全屏效果

---

问题描述：

我们需要将以下这个图设置全屏观看模式
但是在我们设置css样式的情况下 会改变原有的四分屏大小

代码如下

			//获取所需要展示的特定div的全屏模式
            var fullarea = document.getElementById()

            var fullscreen = false;
            if (fullscreen) { // 退出全屏
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            } else { // 进入全屏
                if (fullarea.requestFullscreen) {
                    fullarea.requestFullscreen();
                } else if (fullarea.webkitRequestFullScreen) {
                    fullarea.webkitRequestFullScreen();
                } else if (fullarea.mozRequestFullScreen) {
                    fullarea.mozRequestFullScreen();
                } else if (fullarea.msRequestFullscreen) {
                    // IE11
                    fullarea.msRequestFullscreen();
                }
            }
            fullscreen = !fullscreen;

---

但是当我们这样写的时候 会发现全屏的时候高度不满 会有一部分被黑色所填充 这时候我们就需要在展示的时候加上一个全屏的回调函数 fullscreenchange我们直接绑定到document上不需要获取dom元素 在每次我们使用全屏事件的时候就去执行回调函数

---

解决方案：

直接给document元素绑定一个事件就可以了

   document.addEventListener("fullscreenchange", function () {
                // 进入全屏
                if (document.fullscreenElement) {
    
                } else {
                    // 退出全屏
				 }

            })