Full screen button event in web page

1. A button in the web page can be used to zoom out the full screen. The browser and F11 are generally used for screen projection and display interface. Button binding events can be realized. One zooms in and one zooms out. You can optimize it and change it to one event.

1. Full screen display method

function requestFullscreen() {
    // 检查浏览器是否支持全屏 API
    if (document.documentElement.requestFullscreen) {
        document.documentElement.requestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
        // Firefox
        document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
        // Chrome, Safari and Opera
        document.documentElement.webkitRequestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
        // IE/Edge
        document.documentElement.msRequestFullscreen();
    }
}

2. Exit full screen method
 

function exitFullscreen() {
    // 检查浏览器是否支持退出全屏 API
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        // Firefox
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        // Chrome, Safari and Opera
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
        // IE/Edge
        document.msExitFullscreen();
    }
}

Hope can help you!