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

Question

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

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

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

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

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

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

Answer 5

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

Answer 6

В Chrome как минимум:

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

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

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

Answer 7

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

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

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

Answer 8

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

Answer 9

правый. Совершенно поздно на этом ...

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

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

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

Answer 10

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

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