Обнаружение полноэкранного режима

Современная настольная версия IE 10 всегда полноэкранная.

Существует живая спецификация для псевдонима класса :fullscreen на W3

Но когда я попытался обнаружить полноэкранный режим с jQuery версии 1.9.x и 2.x:

$(document).is(":fullscreen")

он выбросил эту ошибку:

Синтаксическая ошибка, непризнанное выражение: полноэкранный

Вопросы:

  • Это потому, что jQuery еще не распознает этот стандарт или IE10?

  • Каков старый способ проверки полноэкранного режима? Я ожидаю следующих результатов:

    function IsFullScreen() {
     /* Retrun TRUE */
     /* If UA exists in classic desktop and not in full screen  */
     /* Else return FALSE */
}

  • Можем ли мы сделать это без взлома браузера?

Ответы

Ответ 1

Как вы обнаружили, совместимость браузеров - большой недостаток. В конце концов, это что-то очень новое.

Однако, поскольку вы работаете в JavaScript, у вас есть гораздо больше возможностей для вас, чем если бы вы просто использовали CSS.

Например:

if( window.innerHeight == screen.height) {
    // browser is fullscreen
}

Вы также можете проверить немного более свободные сравнения:

if( (screen.availHeight || screen.height-30) <= window.innerHeight) {
    // browser is almost certainly fullscreen
}

Ответ 2

событие запускается, когда браузер изменяет полноэкранный режим. Вы можете использовать это, чтобы установить значение переменной, которое вы можете проверить, чтобы определить, является ли браузер полноэкранным или нет.

this.fullScreenMode = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen; // This will return true or false depending on if it full screen or not.

$(document).on ('mozfullscreenchange webkitfullscreenchange fullscreenchange',function(){
       this.fullScreenMode = !this.fullScreenMode;

      //-Check for full screen mode and do something..
      simulateFullScreen();
 });





var simulateFullScreen = function() {
     if(this.fullScreenMode) {
            docElm = document.documentElement
            if (docElm.requestFullscreen) 
                docElm.requestFullscreen()
            else{
                if (docElm.mozRequestFullScreen) 
                   docElm.mozRequestFullScreen()
                else{
                   if (docElm.webkitRequestFullScreen)
                     docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT)
                }
            }
     }else{
             if (document.exitFullscreen) 
                  document.exitFullscreen()
             else{ 
                  if (document.mozCancelFullScreen) 
                     document.mozCancelFullScreen()
                  else{
                     if (document.webkitCancelFullScreen) 
                         document.webkitCancelFullScreen();
                  }
             }
     }

     this.fullScreenMode= !this.fullScreenMode

}

Ответ 3

Это будет работать на IE9 + и других современных браузерах

function isFullscreen(){ return 1 >= outerHeight - innerHeight };

Использование "1" (вместо нуля), поскольку система иногда может резервировать высоту в один пиксель для взаимодействия с некоторыми скрытыми или скользящими командами, и в этом случае полноэкранное обнаружение завершится неудачей.

  • также будет работать для любого отдельного элемента документа, который будет работать в полноэкранном режиме в любое время.

Ответ 4

Используйте событие fullscreenchange для обнаружения события полноэкранного изменения или если вы не хотите обрабатывать префиксы поставщика, чем вы также можете прослушивать событие resize (событие изменения размера окна, которое также запускается при вводе полноэкранного режима или), а затем проверьте, не имеет ли значение document.fullscreenElement значение null, чтобы определить, включен ли полноэкранный режим. Вам понадобится префикс поставщика fullscreenElement соответственно. Я бы использовал что-то вроде этого:

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement ||
document.webkitFullscreenElement || document.msFullscreenElement;

https://msdn.microsoft.com/en-us/library/dn312066(v=vs.85).aspx имеет хороший пример для этого, который я цитирую ниже:

document.addEventListener("fullscreenChange", function () {
          if (fullscreenElement != null) {
              console.info("Went full screen");
          } else {
              console.info("Exited full screen");              
          }
      });

Ответ 5

Он работает в IE 8, и я пишу конкретную веб-страницу для IE 8. Мне не нужно проверять, поддерживают ли другие браузеры или нет.

function isFullScreen(){
    return window.screenTop == 0 ? true : false;
}

Ответ 6

Попробуйте это! Работает для последних браузеров.

if (!window.screenTop && !window.screenY) {
    alert('Fullscreen mode......');
}

Вы также можете использовать этот плагин jquery для него.

$(window).bind("fullscreen-on", function(e) {
alert("FULLSCREEN MODE");
});

Ответ 8

Modernizr FTW? Попробуйте этот метод.

Ответ 9

var isFullScreen = function()
{
    var dom = document.createElement("img");
    if ("requestFullscreen" in dom
        || "requestFullScreen" in dom
        || "webkitRequestFullScreen" in dom
        || "mozRequestFullScreen" in dom){
        return !0;
    }
    return !1;
}

Ответ 10

Вот еще одно решение, которое может сработать для вас:

function isFullScreen() {
return Math.abs(screen.width - window.innerWidth) < 10; 
}

Я предпочитаю использовать ширину, так как это поможет работать с вкладками и информацией разработчика внизу.

Ответ 11

Я разработал хороший способ сделать это:

w = $('body').width();

if (w == '4800' || w == '4320' || w == '4096' || w == '3200' || w == '3072' || w == '2880' || w == '2560' || w == '2400' || w == '2160' || w == '2048' || w == '1920' || w == '1800' || w == '1620' || w == '1600' || w == '1536' || w == '1440' || w == '1280' || w == '1200' || w == '1152' || w == '1080' || w == '1050' || w == '1024' || w == '960' || w == '900' || w == '864' || w == '800' || w == '768' || w == '720') {
      //User is fullscreen
}

Затем установите ширину по умолчанию для тела:

body { width: calc(100% - 1px) }

Ответ 12

Вот еще одно решение, которое работает в IE 11:

$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function() {
var isFullScreen = document.fullScreen ||
    document.mozFullScreen ||
    document.webkitIsFullScreen || (document.msFullscreenElement != null);
if (isFullScreen) {
    console.log('fullScreen!');
} else {
    console.log('no fullScreen!');
}

});