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

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

先来看这种方法


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

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

|

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

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

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


相关文章
|
7月前
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
|
iOS开发
iOS MFMessageComposeViewController不显示取消按钮,导航条上白色,无取消按钮,无法返回应用...
iOS MFMessageComposeViewController不显示取消按钮,导航条上白色,无取消按钮,无法返回应用...
73 0
|
7月前
|
小程序 JavaScript
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
1008 0
|
5月前
screenfull全屏、退出全屏、指定元素全屏的使用步骤
screenfull全屏、退出全屏、指定元素全屏的使用步骤
376 5
|
5月前
|
JavaScript
vue 全屏 screenfull —— 整页全屏,指定元素全屏,退出全屏,全屏切换等
vue 全屏 screenfull —— 整页全屏,指定元素全屏,退出全屏,全屏切换等
607 0
|
5月前
|
前端开发 JavaScript
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
637 0
|
7月前
在viewWillAppear函数中禁止左滑,viewWillDisappear开启左滑动产生进入下一个页面来回滑动造成无法点击点击按钮问题
在viewWillAppear函数中禁止左滑,viewWillDisappear开启左滑动产生进入下一个页面来回滑动造成无法点击点击按钮问题
41 0
|
7月前
|
前端开发 JavaScript
前端JS实现全屏和退出全屏的效果
前端JS实现全屏和退出全屏的效果
143 0
|
7月前
|
iOS开发
ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱
ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱
105 1