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

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

 Marc26 июн. 2009 г., 06:30
Почему ты должен это обнаружить? Может быть, есть другое решение вашей проблемы?
 Oskar Austegard26 мая 2010 г., 22:45
Я не понимаю третью степень вопроса о мотиве здесь. Существует ряд причин, по которым веб-приложение (например) может выглядеть / вести себя иначе в режиме F11, чем в обычном Chrome. Сосредоточиться на предоставлении решения, а не ставить под сомнение намерение.
 Simon Lieschke22 февр. 2010 г., 13:12
Наше желание сделать это основано на отзывах клиентов.
 Roger Pate26 июн. 2009 г., 10:53
Что, если у них обычно нет часов на рабочем столе, а также они не используют свой полноэкранный браузер? Вы уверены, что несете ответственность за то, что они знают текущее время?
 Simon Lieschke26 июн. 2009 г., 09:45
Когда браузер находится в полноэкранном режиме, нет способа увидеть время, сообщаемое операционной системой (например, в часах в области уведомлений панели задач в Windows). Возможность видеть текущее время может быть важной для пользователей нашего веб-приложения, поэтому мы хотели бы иметь возможность отображать часы, когда браузер работает в полноэкранном режиме. Преимущества экрана - это преимущество, когда наше приложение работает с меньшим разрешением, например 1024 * 768, поэтому мы хотели бы отображать часы только в полноэкранном режиме браузера, если это вообще возможно.

Ответы на вопрос(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());    
}

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

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

 Arve Systad26 июн. 2009 г., 06:58
Если браузер на самом деле работает в полноэкранном режиме, разница между размером области просмотра и разрешением должна равняться 0. Я полагаю, если вы не используете несколько мониторов.
 Simon Lieschke26 июн. 2009 г., 09:29
Вот о чем я думал. Я мог бы написать тестовую страницу, которая отображает все интересующие измерения, и сравнить размеры, сообщенные для страницы, при нормальном и полноэкранном отображении. Оттуда яможет быт быть в состоянии определить состояние для определенных браузеров.
 Omiod28 дек. 2010 г., 14:49
Только что протестирован с Chrome.window.innerWidth , document.body.clientWidth , document.width а такжеdocument.documentElement.clientWidth все сообщают одно и то же значение ...
 Roger Pate26 июн. 2009 г., 07:15
Полосы прокрутки считаются частью области просмотра?
 alex26 июн. 2009 г., 07:41
Я не уверен - тебе придется экспериментировать.

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

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

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

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

PS *: - moz-full-screen тоже работает, но приятно знать.

 F1Krazy03 янв. 2019 г., 14:41
По состоянию на октябрь 2018 года связанная рекомендация устарела и, к сожалению, не будет выполнена.

азывают это Опера Шоу, и вы можете легко контролировать это самостоятельно:

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

В сочетании с Opera @ USB Мне лично это показалось очень удобным.

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

 Dave Maple29 окт. 2012 г., 18:50
Ницца! Это работает надежно в Firefox. Это определенно часть решения.

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

Видеть этот блог hacks.mozilla.org для подробностей.

 Suma02 февр. 2017 г., 17:17
Тем не менее, есть ли способ обнаружить, что пользователь вошел в полноэкранный режим, используя средства браузера (например, F11 или меню рядом с Zoom in Chrome)?

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

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

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

 Simon Gymer08 дек. 2017 г., 16:28
Это не поможет, если пользователь вошел в полноэкранный режим с помощью F11, прежде чем перейти на веб-страницу, на которой запущен этот JavaScript.

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

if (!window.screenTop && !window.screenY) { 
   alert('Browser is in fullscreen');
}
 Tom Ulatowski31 окт. 2011 г., 06:23
Это похоже на работу: if (screen.height === window.outerHeight) {alert ('Браузер работает в полноэкранном режиме'); }
 Vanuan22 июл. 2013 г., 10:55
Это не будет работать, если у пользователя нет границ окна и браузер развернут.
 Ruben08 янв. 2013 г., 16:45
Нет, второе решение не работает в Chrome 23, когда полноэкранный режим через API включен, но пользователь выключает его с помощью Ctrl + alt + F.
 Tom Ulatowski31 окт. 2011 г., 02:32
К сожалению, этот тест оказался ненадежным.
 tm_lv14 февр. 2013 г., 12:33
@ TomUlatowski - не могли бы вы быть более точным, когда это оказалось ненадежным?

еслиdocument.fullscreenElement не является нулевым, чтобы определить, включен ли полноэкранный режим. Вам понадобится префикс продавца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");              
          }
      });

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

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

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

Мое решение:

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);

к которому я пришел ... Я написал его как модуль 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;

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

<!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> требуется, скрипт корректно работает с двумя мониторами), Chrome 33, Rekonq - pass

Победа 7:
Firefox 27, Chrome 33, Opera 12, Opera 20, IE 10 - pass
IE <10 - неудача

Ваш ответ на вопрос