Hay alguna forma de detectar de forma fiable si el navegador se está ejecutando en modo de pantalla completa? Estoy bastante seguro de que no hay ningún explorador de API puede consultar, pero alguien ha trabajado a cabo por la inspección y la comparación de cierta altura/ancho medidas expuestas por el DOM? Incluso si sólo funciona para ciertos navegadores estoy interesado en escuchar acerca de él.

  • ¿Por qué usted necesita para detectar esto? Tal vez hay otra solución a su problema?
  • Cuando el explorador está en modo de pantalla completa no hay manera de ver el tiempo reportado por el sistema operativo (por ejemplo, en el reloj en la barra de tareas área de notificación en Windows). Ser capaz de ver la hora actual puede ser importante para los usuarios de nuestra aplicación web, por lo que nos gustaría ser capaces de mostrar un reloj cuando el navegador está lleno pruebas de detección. Estado real de la pantalla es un lujo cuando nuestra aplicación se ejecuta en resoluciones inferiores, como 1024*768 quisiéramos tan sólo mostrar el reloj cuando el navegador está lleno detectar si en todo posible.
  • Lo que si normalmente no tiene un reloj en su escritorio, y también por no hacer uso del navegador protegida completo? Está usted seguro de que es el único responsable de ellos sabiendo el momento actual?
  • Nuestro deseo para ello se basa en la retroalimentación de los clientes.
  • No entiendo el tercer grado de cuestionamiento de la motivación aquí. Hay un número de razones por las que una aplicación web (por ejemplo) tal vez debe buscar/comportan de manera diferente en F11 modo que en los de chrome. Centrarse en proporcionar una solución en vez de cuestionar la intención.

14 Comentarios

  1. 16

    Chrome 15, Firefox 10, y Safari 5.1 ahora ofrecen Api mediante programación gatillo modo de pantalla completa. Modo de pantalla completa activa este modo, dispone de eventos para detectar cambios de pantalla completa y CSS pseudo-clases para el estilo de pantalla completa de elementos.

    Ver este hacks.mozilla.org blog para más detalles.

  2. 9

    De la ópera trata a pantalla completa como un CSS diferente tipo de medios. Ellos lo llaman La Ópera De Mostrar, y puedes controlar a ti mismo fácilmente:

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

    Combinado con [email protected], personalmente, he encontrado que es muy útil.

  3. 7

    ¿Qué acerca de la determinación de la distancia entre el área de visualización ancho y la resolución de ancho y lo mismo para la altura. Si es una pequeña cantidad de píxeles (especialmente para la altura) es puede ser a pantalla completa.

    Sin embargo, esto nunca va a ser fiable.

    • Si el navegador que en realidad se ejecuta a pantalla completa, la diferencia entre el tamaño de la ventana y la resolución debe ser igual a 0. A menos que usted está ejecutando varios monitores, supongo.
    • Son barras de desplazamiento se cuentan como parte de la ventanilla?
    • No estoy seguro de que tendrás que experimentar.
    • Esta fue de las líneas que estaba pensando a lo largo de. Yo podría escribir una página de prueba que muestra todas las dimensiones de interés y comparar las dimensiones informó de la página cuando se visualiza normalmente y a pantalla completa. De ahí que yo que ser capaz de determinar el estado para ciertos navegadores.
    • Tal vez algo como if (resolutionHeight – viewportHeight) < 100) = fullscreen = true
    • Sólo probado con Chrome. window.innerWidth , document.body.clientWidth , document.width y document.documentElement.clientWidth informe de todas el mismo valor …

  4. 5

    Sólo pensé que me gustaría añadir mi thruppence a salvar a nadie golpear sus cabezas. La primera respuesta es excelente si usted tiene el control completo sobre el proceso, que se inicia la pantalla completa del proceso en el código. Inútil, nadie debe hacerlo thissen pulsando F11.

    La tenue luz de esperanza en el horizonte, en el formulario de esta recomendación de la W3C http://www.w3.org/TR/view-mode/ que permitirá la detección de ventana flotante (sin cromo), maximizada, minimizada y a pantalla completa a través de consultas de medios de comunicación (que por supuesto implica la ventana.matchMedia y asociados).

    He visto signos de que en el proceso de aplicación de la con -webkit y -moz prefijos, pero no parece estar en la producción.

    Así que no, no hay soluciones, pero voy a esperar a salvar a alguien haciendo un montón de correr a su alrededor antes de golpear la misma pared.

    PS *:-moz-pantalla completa hace doo-dah así, pero es bueno saber acerca de.

    • Los enlaces recomendación es obsoleta de octubre de 2018 y no va a ser implementado, por desgracia.
  5. 4

    Firefox 3+ proporciona un estándar de la propiedad en el window objeto de que los informes si el navegador está en modo de pantalla completa o no: de la ventana.pantalla completa.

    • Bueno! Esto funciona de forma fiable en Firefox. Esta es sin duda una pieza de la solución.
  6. 3

    En Chrome, al menos:

    onkeydown puede ser utilizado para detectar la tecla F11 ser pulsado para entrar en pantalla completa.
    onkeyup puede ser utilizado para detectar la tecla F11 siendo presionado para salir de pantalla completa.

    Utilizar junto con la comprobación de keyCode == 122

    La parte difícil sería decir la keydown/keyup de no ejecutar su código si el otro hizo.

    • Esto no ayudará a que si el usuario ingresa a pantalla completa con F11 antes de navegar a la página web que se ejecuta javascript.
  7. 2

    Esto funciona para todos los navegadores :

    if (!window.screenTop && !window.screenY) { 
       alert('Browser is in fullscreen');
    }
    • Por desgracia, esta prueba se ha convertido poco fiables.
    • Esto parece funcionar: si (la pantalla.height === ventana.outerHeight) { alert(‘Navegador en pantalla completa’); }
    • No, la segunda solución no funciona en Chrome 23, cuando está en pantalla Completa a través de la API es, pero el usuario apaga con Ctrl+alt+F.
    • ¿podría ser más específico cuando se convirtió poco fiables?
    • Esto no funcionará si el usuario no tiene bordes de ventana y tiene el navegador maximizado.
    • Esto no funcionará si el navegador conectado a la parte superior.

  8. 2

    Usted puede comprobar si document.fullscreenElement no es null para determinar si el modo de pantalla completa está en. Usted necesitará proveedor prefijo fullscreenElement en consecuencia. Me gustaría usar 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 de esto que cito a continuación:

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

    Hay mi NO cross-browser variante:

    <!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>

    Probado en:

    Kubuntu 13.10:

    Firefox 27 (<!DOCTYPE html> es necesario, el script funciona correctamente con dos monitores), Chrome 33, Rekonq – pass

    Win 7:

    Firefox 27, Chrome 33, Opera 12, de la Ópera de 20, es decir, 10 – pase

    IE < 10 – fallar

  10. 1

    Mi solución es:

    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);
  11. 1

    Esta es la solución que he llegado a…
    Lo escribí como una es6 módulo, pero el código debería ser bastante sencillo.

    /**
     * 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;
  12. 0

    Usuario window.innerHeight y screen.availHeight. También los anchos.

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

Dejar respuesta

Please enter your comment!
Please enter your name here