全屏了却判断为未全屏(已解决)

简介: 全屏了却判断为未全屏(已解决)

先来看这种方法


function isFullScreen () {
    var isFull = false;
    if (document.fullscreenEnabled || document.msFullscreenEnabled ) {
        isFull = window.fullScreen || document.webkitIsFullScreen;
        if (isFull === undefined) {
            isFull = false;
        }
    }
    return isFull


或者


function isFullScreen () {
  return 
  document.
  isFullScreen || 
  document.
  mozIsFullScreen || 
  document.
  webkitIsFullScre
}

以上的方法如果没有用(意思是明明全屏了函数却返回false

那么请看以下解决方案

function isFullscreen () {
      const screen = window.screen
      const body = document.body.getBoundingClientRect()
      return screen.height === body.height && screen.width === body.width
}


这种方案并不是去访问检测是否处于全屏模式的API

而是用视口的宽高去与屏幕的宽高做严格对比

|

如果两者的值都相等那么就是处于全屏的

一般只对比视口的高度和屏幕高度即可

(视口会计算控制台占用的部分,如果不对比宽开着控制台也算全屏)


相关文章
|
开发框架 前端开发 JavaScript
在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
在Vue&Element前端项目中,使用FastReport + pdf.js生成并展示自定义报表
|
关系型数据库 MySQL 数据安全/隐私保护
关于Navicat Premium连接MySQL出现2059错误解决方法
关于Navicat Premium连接MySQL出现2059错误解决方法
|
XML JSON 前端开发
前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容(二)
前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容
|
移动开发 小程序 前端开发
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
|
缓存 对象存储 数据安全/隐私保护
阿里云OSS图片访问出现跨域:Access to image at from origin has been blocked by CORS policy
阿里云OSS图片访问出现跨域:Access to image at from origin has been blocked by CORS policy
3578 0
阿里云OSS图片访问出现跨域:Access to image at from origin has been blocked by CORS policy
|
9月前
|
人工智能 知识图谱
SVFR:全能视频人脸修复框架,支持提升清晰度、色彩填充和缺失补全等图像修复任务
SVFR 是一个通用视频人脸修复框架,支持人脸修复、着色和修复任务,基于 Stable Video Diffusion 技术,提供高质量的视频修复效果。
554 23
SVFR:全能视频人脸修复框架,支持提升清晰度、色彩填充和缺失补全等图像修复任务
|
XML JSON 前端开发
Qt委托代理机制之《Model/View/Delegate使用方法》
Qt委托代理机制之《Model/View/Delegate使用方法》
900 1
|
Java 网络安全
zookeeper的环境搭建和配置
本文介绍了如何在多台节点上搭建和配置Zookeeper环境。内容包括Zookeeper的下载、解压、环境变量配置、配置文件修改、zkdata目录创建、myid文件设置,以及将Zookeeper及其配置文件复制到其他节点。还提供了运行测试的命令,包括启动、状态检查和停止Zookeeper服务。
zookeeper的环境搭建和配置
|
缓存 对象存储 数据安全/隐私保护
阿里云OSS, 跨域请求, No ‘Access-Control-Allow-Origin‘
阿里云OSS, 跨域请求, No ‘Access-Control-Allow-Origin‘
1356 0
|
开发框架 .NET 编译器
error:D8016 “/ZI”和“/Gy-”命令行选项不兼容 ”问题解决
error:D8016 “/ZI”和“/Gy-”命令行选项不兼容 ”问题解决