H5实现全屏与F11全屏

最近做项目用到全屏，现总结一下全屏：

1.局部全屏：H5全屏和F11有区别，在这种情况下判断全屏只需要通过H5全屏属性，无论全屏后有无滚动条都可判断。

/**
* [isFullscreen 判断浏览器是否全屏]
* @return [全屏则返回当前调用全屏的元素,不全屏返回false]
*/
function isFullscreen(){
return document.fullscreenElement ||
document.msFullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement || false;
}

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("不全屏");
}
}
}

H5实现全屏与F11全屏相关推荐

H5案例分享：微信视频播放全屏问题
2019独角兽企业重金招聘Python工程师标准>>> 微信视频播放全屏问题在ios和安卓手机里的微信下播放视频时,会遇到不少问题,例如需要手动点击,视频才会播放,并且视频会跳出微 ...
js实现全屏与退出全屏，解决F11进入全屏后退出全屏API方法失效（chrome）
js实现全屏与退出全屏,解决F11进入全屏后退出全屏API方法失效(chrome) 解决的问题谷歌浏览器F11全屏后,在页面中编写的全屏按钮失效解决方法 //判断是否是全屏状态 var isFul ...
js实现浏览器全屏与退出全屏，解决chrome下F11进入全屏后退出全屏API方法失效
1. 问题说明网页全屏和退出全屏其实已经算的上一个很常见的功能了,那是不是直接用HTML5全屏API就没什么问题了,但是不要忘了键盘上的F11有着同样的功能,实际使用的时候就发现F11使网页进入全屏 ...
esc键退出全屏 vue_Js 网页全屏（vue）-2020-08-26-亲测兼容 F11、ESC的全屏操作
Js 网页全屏(vue) 效果描述以下逻辑均正常点击按钮全屏.点击按钮退出全屏.再点击按钮全屏点击按钮全屏,F11 / ESC 退出全屏,点击按钮全屏 F11 进入全屏,点击按钮退出全屏不同页 ...
web端原生js实现全屏和退出全屏（F11功能）
一.在项目中使用按钮进行控制全屏功能 1. 选中要实现全屏功能的元素(一般是一个按钮) var $fullBtn = document.querySelector('.fullBtn') //全屏按钮 ...
js实现浏览器全屏 F11全屏
浏览器全屏模式的启动函数requestFullscreen仍然需要附带各浏览器的js方言前缀,相信下面这段代码需要你花大量的搜索才能凑齐: 代码如下: // 判断各种浏览器,找到正确的方法 funct ...
JS 全屏和退出全屏--requestFullScreen详解及兼容代码
浏览器全屏实现方式 1.利用h5的requestFullScreen 2.摁F11实现全屏效果 requestFullscreen全屏具体实现 1.进入全屏 function full(ele) {i ...
JS实现全屏和退出全屏
JS实现全屏和退出全屏 //全屏 function fullScreen(){var el = document.documentElement;var rfs = el.requestFullScr ...
通过单击按钮实现全屏、退出全屏
没什么好说的,看代码 HTML <el-button size="mini" type="success" @click="intScreen& ...

H5实现全屏与F11全屏

H5实现全屏与F11全屏相关推荐

最新文章

热门文章