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

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

先来看这种方法


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

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

|

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

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

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


相关文章
|
1天前
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
|
2天前
|
小程序 JavaScript
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
|
8月前
|
iOS开发
iOS MFMessageComposeViewController不显示取消按钮,导航条上白色,无取消按钮,无法返回应用...
iOS MFMessageComposeViewController不显示取消按钮,导航条上白色,无取消按钮,无法返回应用...
31 0
|
1天前
|
前端开发 JavaScript
前端JS实现全屏和退出全屏的效果
前端JS实现全屏和退出全屏的效果
19 0
|
7月前
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
29 0
|
2天前
|
iOS开发
ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱
ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱
35 1
|
9月前
|
JavaScript
js全屏、退出全屏、判断是否处于全屏状态
js全屏、退出全屏、判断是否处于全屏状态
248 0
|
9月前
|
前端开发
上传图片组件的悬停显示删除等操作遮罩层
上传图片组件的悬停显示删除等操作遮罩层
Activity添加进入和退出动画的两种方式,解决黑色区域问题
Activity添加进入和退出动画的两种方式,解决黑色区域问题