javascript - only - Detecta el modo de pantalla completa

jquery fullscreen

Question

La versión de escritorio moderna de IE 10 siempre es a pantalla completa.

Hay una especificación de vida para :fullscreen pseudo-clase de :fullscreen en W3

Pero cuando intenté detectar pantalla completa con jQuery versión 1.9.xy 2.x:

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

arrojó este error:

Error de sintaxis, expresión no reconocida: pantalla completa

Preguntas:

1. ¿Es porque jQuery aún no reconoce este estándar o IE10?

2. ¿Cuál es la forma heredada de verificar el modo de pantalla completa? Estoy esperando los siguientes resultados:

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

3. ¿Podemos hacerlo sin olfatear navegador?

Answer 1

¡Prueba esto! Funciona para navegadores recientes.

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

También puedes usar this plugin de jquery para lo mismo.

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

Answer 2

¿Intentó $ (ventana) en lugar de $ (documento). Siga un ejemplo http://webification.com/tag/detect-fullscreen-jquery .

Answer 3

Aquí hay otra solución que funciona en 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!'');
}

});

Answer 4

Aquí hay otra solución que podría funcionar para usted:

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

Prefiero usar ancho ya que te ayudará a trabajar con las pestañas y la información del desarrollador en la parte inferior.

Answer 5

Como habrás descubierto, la compatibilidad del navegador es un gran inconveniente. Después de todo, esto es algo muy nuevo.

Sin embargo, dado que está trabajando en JavaScript, tiene muchas más opciones disponibles que si solo estuviera usando CSS.

Por ejemplo:

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

También puede verificar algunas comparaciones un poco más flexibles:

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

Answer 6

Está trabajando en IE 8 y estoy escribiendo una página web específica para IE 8. No necesito verificar si los otros navegadores lo admiten o no.

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

Answer 7

Esto funcionará en IE9 + y otros navegadores modernos

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

Usando "1" (en lugar de cero) porque el sistema, a veces, podría reservar una altura de un píxel para la interacción del mouse con algunas barras de comandos ocultas o deslizantes, en cuyo caso fallaría la detección de pantalla completa.

• también funcionará para cualquier elemento de documento separado que se encuentre en modo de pantalla completa en cualquier momento.

Answer 8

Trabajé una buena manera de hacer esto:

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
}

A continuación, establezca el ancho predeterminado del cuerpo en:

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

Answer 9

Use el evento de fullscreenchange para detectar un evento de cambio a pantalla completa, o si no desea manejar los prefijos del proveedor, también puede escuchar el evento de cambio de resize (el evento de cambio de tamaño de la ventana que también se activa cuando se ingresa o sale de la pantalla completa) y luego verificar si el document.fullscreenElement no es nulo para determinar si el modo de pantalla completa está document.fullscreenElement . Necesitará el prefijo del proveedor en fullscreenElement consecuencia. Yo usaría algo como esto:

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

https://msdn.microsoft.com/en-us/library/dn312066(v=vs.85).aspx tiene un buen ejemplo para esto que cito a continuación:

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

Answer 10

un evento se dispara cuando el navegador cambia al modo de pantalla completa. Puede usarlo para establecer un valor variable, que puede verificar para determinar si el navegador está en pantalla completa o no.

this.fullScreenMode = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen; // This will return true or false depending on if it''s 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

}

Answer 11

Modernizr FTW ? Prueba esta esencia.

Answer 12

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