zoukankan      html  css  js  c++  java
  • 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("不全屏");
                    }
                }
            }
  • 相关阅读:
    字符,字符串,字节
    111
    串口通信
    字符编码
    枚举和结构体
    参数数组
    .Net垃圾回收机制
    try{ } catch{ } finally{ }
    LVS 工作原理图文讲解
    自动化运维工具—Ansible常用模块二
  • 原文地址:https://www.cnblogs.com/juicy-initial/p/9868409.html
Copyright © 2011-2022 走看看