Обнаружение, если браузер находится в полноэкранном режиме

Есть ли способ надежно обнаружить, работает ли браузер в полноэкранном режиме? Я почти уверен, что нет какого-либо API-браузера, который я могу запросить, но кто-нибудь отработал его, проверив и сравнив определенные измерения высоты/ширины, открытые DOM? Даже если это работает только для определенных браузеров, мне интересно услышать об этом.

Ответ 1

Chrome 15, Firefox 10 и Safari 5.1 теперь предоставляют API-интерфейсы для программного запуска полноэкранного режима. Полноэкранный режим, запускаемый таким образом, предоставляет события для обнаружения полноэкранных изменений и псевдоклассы CSS для стилизации полноэкранных элементов.

Подробности смотрите в этом блоге hacks.mozilla.org.

Ответ 2

Opera рассматривает полноэкранный режим как другой тип мультимедиа CSS. Они называют это Opera Show, и вы можете легко управлять этим:

@media projection {
  /* these rules only apply in full screen mode */
}

В сочетании с Opera @USB, я лично нашел его чрезвычайно удобным.

Ответ 3

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

Однако это никогда не будет надежным.

Ответ 4

Просто подумал, что я добавлю свою нерушимость, чтобы спасти всех, кто ударяет их головами. Первый ответ превосходный, если у вас есть полный контроль над процессом, то есть вы инициируете полноэкранный процесс в коде. Бесполезно, если кто-нибудь сделает это в этом сезоне, нажав F11.

Мерцание надежды на горизонте приходит в виде этой рекомендации W3C http://www.w3.org/TR/view-mode/, которая позволит обнаруживать оконные, плавающие (без хром), максимизированный, минимизированный и полноэкранный режим с помощью медиа-запросов (что, конечно, означает window.matchMedia и связанные с ним).

Я видел признаки того, что он в процессе реализации с префиксами -webkit и -moz, но пока не работает.

Так нет, нет решений, но, надеюсь, я спасу, кто-то много бегает, прежде чем ударить по той же стене.

PS *: - moz-full-screen также делает doo-dah, но приятно знать.

Ответ 5

Firefox 3+ предоставляет нестандартное свойство объекта window, который сообщает, находится ли браузер в полноэкранном режиме или нет: window.fullScreen.

Ответ 6

Для Safari на iOS можно использовать:

if (window.navigator.standalone) {
  alert("Full Screen");
}

Подробнее: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Ответ 7

В Chrome по крайней мере:

onkeydown может использоваться для обнаружения нажатия клавиши F11 для входа в полноэкранный режим. onkeyup может использоваться для обнаружения нажатия клавиши F11 для выхода из полноэкранного режима.

Используйте это в сочетании с проверкой на keyCode == 122

Сложной частью было бы сказать keydown/keyup не выполнять свой код, если только что сделал другой.

Ответ 8

Это работает для всех новых браузеров:

if (!window.screenTop && !window.screenY) { 
   alert('Browser is in fullscreen');
}

Ответ 9

Right. Полностью поздно на этом...

Начиная с 25 ноября 2014 года (время записи), элементы могут запрашивать полноэкранный доступ и впоследствии управлять входом/выходом из полноэкранного режима.

MDN Объяснение здесь: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

Простые объяснения Дэвида Уолша: http://davidwalsh.name/fullscreen

Ответ 10

Вы можете проверить, не имеет ли значение 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");              
          }
      });

Ответ 11

Есть мой НЕ-браузерный вариант:

<!DOCTYPE html>
<html>
<head>
  <title>Fullscreen</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var fullscreen = $(window).height() + 1 >= screen.height;
$(window).on('resize', function() {
  if (!fullscreen) {
    setTimeout(function(heightStamp) {
      if (!fullscreen && $(window).height() === heightStamp && heightStamp + 1 >= screen.height) {
        fullscreen = true;
        $('body').prepend( "<div>" + $( window ).height() + " | " + screen.height + " | fullscreen ON</div>" );
      }
    }, 500, $(window).height());
  } else {
    setTimeout(function(heightStamp) {
      if (fullscreen && $(window).height() === heightStamp && heightStamp + 1 < screen.height) {
        fullscreen = false;
        $('body').prepend( "<div>" + $( window ).height() + " | " + screen.height + " | fullscreen OFF</div>" );
      }
    }, 500, $(window).height());
  }
});
</script>
</body>
</html>

Протестировано:
Kubuntu 13.10:
Firefox 27 (<!DOCTYPE html> требуется, script корректно работает с двумя мониторами), Chrome 33, Rekonq - pass

Win 7:
Firefox 27, Chrome 33, Opera 12, Opera 20, IE 10 - пройдите
IE < 10 - сбой

Ответ 12

Мое решение:

var fullscreenCount = 0;
var changeHandler = function() {                                           

    fullscreenCount ++;

    if(fullscreenCount % 2 === 0)
    {
        console.log('fullscreen exit');
    }
    else
    {
        console.log('fullscreened');
    }

}                                                                         
document.addEventListener("fullscreenchange", changeHandler, false);      
document.addEventListener("webkitfullscreenchange", changeHandler, false);
document.addEventListener("mozfullscreenchange", changeHandler, false);
document.addEventListener("MSFullscreenChanges", changeHandler, false);

Ответ 13

Это решение, к которому я пришел... Я написал его как модуль es6, но код должен быть довольно простым.

/**
 * Created by sam on 9/9/16.
 */
import $ from "jquery"

function isFullScreenWebkit(){
    return $("*:-webkit-full-screen").length > 0;
}
function isFullScreenMozilla(){
    return $("*:-moz-full-screen").length > 0;
}
function isFullScreenMicrosoft(){
    return $("*:-ms-fullscreen").length > 0;
}

function isFullScreen(){
    // Fastist way
    var result =
        document.fullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement;

    if(result) return true;

    // A fallback
    try{
        return isFullScreenMicrosoft();
    }catch(ex){}
    try{
        return isFullScreenMozilla();
    }catch(ex){}
    try{
        return isFullScreenWebkit();
    }catch(ex){}

    console.log("This browser is not supported, sorry!");
    return false;
}

window.isFullScreen = isFullScreen;

export default isFullScreen;

Ответ 14

Пользователь window.innerHeight и screen.availHeight. Также ширины.

window.onresize = function(event) {
    if (window.outerWidth === screen.availWidth && window.outerHeight === screen.availHeight) {
        console.log("This is your MOMENT of fullscreen: " + Date());    
}

Ответ 15

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

if(document.fullscreenElement){
  console.log("Fullscreen");
}else{
  console.log("Not Fullscreen");
};

Поддерживает во всех основных браузерах.