如何检测浏览器已进入全屏 [英] How to detect browser has gone to full screen

问题描述

TLDR；

我可以通过全屏API检测浏览器是否已进入全屏状态，但无法通过f11或浏览器菜单(特别是Chrome)检测到浏览器已进入全屏状态.

I can detect if the browser has gone to full screen through the full screen API but I cannot detect that the browser has gone to full screen through f11 or the browser menu (specifically chrome).

原文:

当前，我正在使用 screenfull 进入全屏状态并检测到浏览器处于全屏.问题是当浏览器通过浏览器功能进入全屏状态(即f11或通过浏览器菜单全屏显示)时，我不想显示全屏切换按钮.这是因为javascript全屏API似乎无法检测到您处于全屏状态，或者您无法通过浏览器功能进入全屏状态.我只能检测是否击中了f11，但这不适用于Mac或通过浏览器菜单启动全屏显示的情况.

Currently I am using screenfull to go to full screen and detect that the browser is in full screen. The problem is that I do not want to display my full screen toggle button when the browser has gone to full screen through a browser function (i.e. f11 or full screen through the browser menus). This is because the javascript full screen API does not seem to be able to detect that you are in full screen or get you out of full screen when you have gone there through a browser function. I could just detect if f11 was hit, but this doesn't work on mac or when full screen has been initiated through the browser menus.

关于如何检测是否通过浏览器功能启动全屏的任何想法?我只针对与webgl兼容的浏览器，这样可以减少很多麻烦.

Any ideas on how to detect if full screen was initiated through a browser function? I'm only targeting webgl compatible browsers so that cuts down on a lot of gotchas.

推荐答案

我尚未测试其可靠性，但这是我的看法.

I haven't tested this for reliability but this is my take.

  //without jQuery
window.addEventListener('resize', function(){
  if(screen.width === window.innerWidth){
   // this is full screen
  }
});


  //with jQuery
$(document).ready(function() {
  $(window).on('resize', function(){
    if(screen.width === window.innerWidth){
      // this is full screen
    }
  });
});

当按F11按钮和其他方法时，这似乎起作用，因此它应该可以捕获全屏api无法解决的情况.尽管我不确定 screen.width与window.innerWidth 的比较是检查全屏的可靠方法.也许其他人可以对此添加评论.

This seems to work when pressing the F11 button and other methods, so it should catch the edge cases that the full screen api does not. Although I'm not sure the comparison of screen.width vs. window.innerWidth is a reliable way to check for full screen. Maybe someone else can add to/critique this.

这篇关于如何检测浏览器已进入全屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！