H5实现全屏与F11全屏

最近做项目用到全屏，现总结一下全屏：

1.局部全屏：H5全屏和F11有区别，在这种情况下判断全屏只需要通过H5全屏属性，无论全屏后有无滚动条都可判断。

 1          /**
 2          * [isFullscreen 判断浏览器是否全屏]
 3          * @return [全屏则返回当前调用全屏的元素,不全屏返回false]
 4          */
 5         function isFullscreen(){
 6             return document.fullscreenElement    ||
 7                    document.msFullscreenElement  ||
 8                    document.mozFullScreenElement ||
 9                    document.webkitFullscreenElement || false;
10         }

2.页面全屏：H5全屏和F11实现效果一样，根据浏览器可视区域与电脑屏幕大小做比较，但只能判断无滚动的页面。

  function isFullscreenForNoScroll(){
            var explorer = window.navigator.userAgent.toLowerCase();
            if(explorer.indexOf('chrome')>0){//webkit
                if (document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width) {
                    alert("全屏");
                } else {
                    alert("不全屏");
                }
            }else{//IE 9+  fireFox
                if (window.outerHeight === window.screen.height && window.outerWidth === window.screen.width) {
                    alert("全屏");
                } else {
                    alert("不全屏");
                }
            }
        }

 

转载于:https://www.cnblogs.com/juicy-initial/p/9868409.html