先来看这种方法
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
而是用视口的宽高去与屏幕的宽高做严格对比
|
如果两者的值都相等那么就是处于全屏的
一般只对比视口的高度和屏幕高度即可
(视口会计算控制台占用的部分,如果不对比宽开着控制台也算全屏)