HTML 5 较高兼容性的全屏代码

注意点：

1、全屏是需要手动出发，自动加载无效

2、全屏需要指定显示内容的范围容器(指定整个页面、DIV等)

 

// uiFull 点击元素的 ID
 $("#uiFull").click(function () {
            // 检测浏览器是否支持全屏
            if (document.mozFullScreenEnabled || document.fullscreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled) {
                //当前是否处于全屏状态
                if (document.webkitFullscreenElement || document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
                    //取消
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    }
                    else if (document.webkitExitFullscreen) {
                        document.webkitExitFullscreen();
                    }
                    else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                    else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    }
                    
                } else {
                    //指定元素进入全屏状态
                    // ID = 'html' 的元素容器为全屏的内容范围
                    var ele = document.getElementById("html");
                    // going full-screen
                    if (ele.requestFullscreen) {
                        ele.requestFullscreen();
                    }
                    else if (ele.webkitRequestFullscreen) {
                        ele.webkitRequestFullscreen();
                    }
                    else if (ele.msRequestFullscreen) {
                        ele.msRequestFullscreen();
                    }
                    else if (ele.mozRequestFullScreen) {
                        ele.mozRequestFullScreen();
                    }
                   
                }
            } else {
                alert('浏览器不支持全屏');
            }
        });

 

谢谢

 

参考：

http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/20141117515.html