js全屏操作之判断全屏_全赞功成湿的博客

判断浏览器是否支持requestFullscreen

首先是一段判断浏览器是否支持h5全屏api（requestFullscreen）的代码，如下：

* [isFullscreenEnabled 判断全屏模式是否是可用] * @return [支持则返回true,不支持返回false] function isFullscreenEnabled(){ return document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled || false ;

现在来区分一下全屏的两种情况

第一种 ：局部全屏，这里得把使用h5全屏api（requestFullscreen）和使用浏览器自带的全屏快捷键F11区分开来，如下图：

图1：这是未进行任何全屏下的状态

图2：这是使用h5全屏api（requestFullscreen）后的全屏

图3：这是使用浏览器自带的全屏快捷键F11达到的全屏

效果显而易见，按F11快捷键的全屏只是把浏览器地址栏给隐藏掉了而已，而h5的全屏api将“需要全屏的dom元素”给全屏了，这个时候就无需判断F11快捷键的全屏了，只需判断h5全屏的属性（fullscreenElement）即可，代码如下：

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

第二种 ：整个页面被一个标签铺满，页面没有出现滚动条的全屏（通常是在做网页游戏），在这种情况下，使用h5全屏api（requestFullscreen）和使用浏览器自带的全屏快捷键F11达到的效果是一样的，如下图。

在这种情况下，全屏判断就得考虑是否是按了F11键全屏，此时，就不能使用h5的判断全屏的属性（fullscreenElement）去判断全屏了，此属性只在调用setFullscreen函数全屏时判断有效，而在使用浏览器“F11”全屏快捷键的时候无效，这个时候得根据浏览器可视区域与电脑屏幕大小做比较，来判断是否全屏，无论是setFullscreen函数还是按“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("不全屏");
isFullscreen方法 有滚动条的页面 无滚动条的页面
Fullscreen api启动的全屏 √ √
按f11启动的全屏 × × 
isFullscreenForNoScroll方法 有滚动条的页面 无滚动条的页面
Fullscreen api启动的全屏 × √
按f11启动的全屏 × √ 
√：方法有效； 
 ×：方法无效； 
目前还无法判断有滚动条按f11的全屏状态。
                                    <p># Python PyQt6 全屏图片播放器项目<br /><br />## 课程介绍<br /><br />PyQt 是 Python 和 Qt 的融合，是一个非常强大的 GUI 库。<br /><br />本课程使用 Python PyQt6，带大家一步一步实现一个全屏图片播放器。<br /><br />课程的主要内容有：<br /><br />1. 项目演示；<br />2. 设计播放器主界面；<br />3. 实现选择文件夹；<br />4. 实现全屏自适应播放图片；<br />5. 实现暂停播放、继续播放；<br />6. 实现退出播放；<br />7. 程序发布。<br /><br />## 项目截图<br /><br /><img src="https://img-bss.csdnimg.cn/202209130849226529.png" alt="" /></p>
<p><img src="https://img-bss.csdnimg.cn/202209130849391734.jpg" alt="" /></p>
<p><img src="https://img-bss.csdnimg.cn/202209130850307321.jpg" alt="" /></p>
<p><img src="https://img-bss.csdnimg.cn/202209130850483182.jpg" alt="" /></p>
<p> </p>
<p>## 备注<br /><br />1. 课程代码等内容，在课程课件里面；</p>
<p>2. 购买课程后，播放页左上角才会出现下载按钮。</p>
<p> </p>
<p><img src="https://img-bss.csdnimg.cn/202302140208485565.png" alt="" /></p>
<p><img src="https://img-bss.csdnimg.cn/202302140209049801.png" alt="" /></p>
                                    // 引入lodashimport _ from 'lodash'// 切换全屏方法export function fullScreen (isOpen, target) {    let dom = target || void 0    let open_list = ['requestFullscreen', 'mozRequestFullScreen', 'webkitRequestFul...
                                    开启全屏
 if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
 //FireFox
 else if (document.documentElement.mozRequestFullScreen) {
      document.docum...
            /*判断是否全屏*/
            var isFullscreen = document.fullScreenElement//W3C
                || document.msFullscreenElement //IE
                || document.mozFullScreenElement //火狐
                || document.we...
    document.fullscreenElement ||
    document.msFullscreenElement ||
    document.mozFullScreenElement ||
                                    app在手机上运行时，默认打开时是全屏的，所以获取的窗口尺寸为手机的屏幕尺寸
如果手机连接到大屏上(如华为手机，锤子手机等)，打开的app不一定是全屏的，获取的窗口尺寸就不是全屏尺寸，
下面介绍一直方法，可以判断是否全屏
WindowManager mWm = (WindowManager)this.getSystemService(Context.WINDOW_SERVICE);
int mFu...
问题原因：在移动端使用video.js与fastclick 冲突
解决方式：修改fastclick的源码
FastClick.prototype.needsClick = function(target) {
		switch (target.nodeName.toLowerCase()) {
		// Don't send a synthetic click to disabled inputs (issue #62)
                                    //判断浏览器是否全屏
function isFullscreenForNoScroll() {
var explorer = window.navigator.userAgent.toLowerCase();
if (explorer.indexOf(‘chrome’) &gt; 0) {
//webkit
if (document.body.scrollHeight === window.sc...
                                     山寨版很好很强大：简单介绍一下，这是我用过的，获取屏幕的四个顶点（具体检测的时候可以向屏幕的中心剪一个像素，譬如检测 1,1而不是0,0）所在窗口的句柄，如果四个句柄都相同，则认为是全屏状态，其实有个问题，有些程序全屏的时候，还会有窗口弹出来，典型的像播放软件，全屏的时候，下面还有一个工具栏，这个工具栏和后面的播放窗口是不同的，所以检测失败了。对这种方法加强就是，获取四个点窗口所在的进程
                                    $(".full-btn").click(function(){ if($(this).hasClass("cur")){  $(this).removeClass("cur"); }else{  $(this).addClass("cur"); }})$('.full-btn').click(function () {  if (!...
    <button v-if="!ifFullScreen" @click="fullScreenPage">整个页面全屏</button>
    <button v-if="ifFullScreen" @click="exitFullScreen">退出全屏</button>
    <button @click="fullScreenPart('father
需求很简单，但是实际上手发现有几个难点：
1.浏览器在全屏状态下按F11和Esc可以退出全屏，且全屏状态按这两个键无法被按键事件捕获，这给判断是否全屏状态带来了困难。
2.document.fullscreenElement可以判断是否全屏，但如果是通过F11的默认事件进入全屏的话，这种判断方式会失效。
3.document.fullscreenElement无法实时监听，这意味着不能单纯的通过绑定这个

isFullscreen方法	有滚动条的页面	无滚动条的页面
Fullscreen api启动的全屏	√	√
按f11启动的全屏	×	×