Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说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 { 
   
                    // 退出全屏
				 }

            })

今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。