¿Hay alguna forma de detectar de manera confiable si un navegador se está ejecutando en modo de pantalla completa? Estoy bastante seguro de que no hay ninguna API de navegador que pueda consultar, pero ¿alguien lo resolvió inspeccionando y comparando ciertas medidas de altura/ancho expuestas por el DOM? Incluso si solo funciona para ciertos navegadores, me interesa saberlo.Detectando si un navegador está en modo de pantalla completa
¿Qué pasa con la determinación de la distancia entre el ancho de la ventana gráfica y el ancho de la resolución, y también para la altura? Si se trata de una cantidad pequeña de píxeles (especialmente para la altura), puede estar en pantalla completa.
Sin embargo, esto nunca será confiable.
Si el navegador se está ejecutando en pantalla completa, la diferencia entre el tamaño de la ventana gráfica y la resolución debe ser igual a 0. A menos que esté ejecutando varios monitores, supongo. –
¿Se cuentan las barras de desplazamiento como parte de la ventana gráfica? –
No estoy seguro, tendrás que experimentar. – alex
Opera trata la pantalla completa como un tipo de medio CSS diferente. Lo llaman Opera Show, y se puede controlar fácilmente usted mismo:
@media projection {
/* these rules only apply in full screen mode */
}
Combinado con [email protected], he encontrado personalmente que sea extremadamente práctico.
Esto funciona para todos los nuevos navegadores:
if (!window.screenTop && !window.screenY) {
alert('Browser is in fullscreen');
}
Lamentablemente, esta prueba no se ha vuelto confiable. –
Esto parece funcionar: if (screen.height === window.outerHeight) { alert ('El navegador está en pantalla completa'); } –
No, la segunda solución no funciona en Chrome 23, cuando la pantalla completa está activada a través de API, pero el usuario la desactiva con Ctrl + alt + F. – Ruben
Chrome 15, Firefox 10, y Safari 5.1 ahora proporcionan APIs para desencadenar mediante programación modo de pantalla completa. El modo de pantalla completa activado de esta manera proporciona eventos para detectar cambios de pantalla completa y pseudo-clases de CSS para diseñar elementos de pantalla completa.
Consulte this hacks.mozilla.org blog post para obtener más información.
Aún así, ¿hay alguna forma de detectar el usuario ingresado a pantalla completa usando los medios provistos por el navegador (como F11 o el menú al lado de Acercar en Chrome)? – Suma
Firefox 3+ proporciona una propiedad no estándar en el objeto window que informa si el navegador está en modo de pantalla completa o no: window.fullScreen.
¡Agradable! Esto funciona de manera confiable en Firefox. Esto es definitivamente una parte de la solución. –
Para Safari en iOS puede utilizar:
if (window.navigator.standalone) {
alert("Full Screen");
}
En Chrome al menos:
onkeydown se puede utilizar para detectar la tecla F11 ser presionado para entrar en pantalla completa. onkeyup se puede utilizar para detectar la tecla F11 presionada para salir de pantalla completa.
uso que, en conjunción con la comprobación de keyCode == 122
La parte difícil sería para decirle al keydown/no keyUp para ejecutar su código si el otro acaba de hacer.
Esto no ayuda si el usuario ingresó a pantalla completa con F11 antes de que navegaran a la página web que ejecutaba ese javascript. –
No es mi variante NO multi-navegador:
<!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> se requiere, la escritura correcta funciona con doble monitores), Chrome 33, Rekonq - pass
Win 7:
Firefox 27, Chrome 33, Opera 12, Opera 20, IE 10 - pase
IE < 10 - falla
Derecha. Totalmente tarde en este ...
A partir del 25 de noviembre de 2014 (hora de redacción), es posible que los elementos soliciten acceso a pantalla completa y posteriormente controlen la entrada y salida del modo de pantalla completa.
MDN Explicación aquí: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
explicación directa por David Walsh: http://davidwalsh.name/fullscreen
Sólo pensé que me gustaría añadir mi thruppence a salvar a alguien golpeando sus cabezas. La primera respuesta es excelente si tiene control total sobre el proceso, es decir, inicia el proceso de pantalla completa en el código. Inútil si alguien lo hace esto al presionar F11.
El rayo de esperanza en el horizonte viene en la forma de esta recomendación W3C http://www.w3.org/TR/view-mode/ que permitirá la detección de ventanas, flotantes (sin cromo), maximizadas, minimizadas y pantalla completa a través de consultas multimedia (que por supuesto significa window.matchMedia y asociado).
He visto indicios de que está en proceso de implementación con los prefijos -webkit y -moz, pero parece que aún no está en producción.
Así que no, no hay soluciones, pero espero que salve a alguien que corre mucho antes de llegar a la misma pared.
PD *: - la pantalla completa a pantalla completa también hace doo-dah, pero es bueno saberlo.
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);
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());
}
Puede comprobar si document.fullscreenElement no es nulo para determinar si el modo de pantalla completa está activada. Necesitará el prefijo de proveedor fullscreenElement en consecuencia. Me gustaría utilizar 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");
}
});
Esta es la solución que he llegado a ... lo escribí como un módulo es6 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;
¿Por qué necesita detectar esto? Tal vez hay otra solución a su problema? – Marc
Cuando el navegador está en modo de pantalla completa, no hay forma de ver la hora informada por el sistema operativo (por ejemplo, en el reloj en el área de notificaciones de la barra de tareas 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 poder mostrar un reloj cuando el buscador esté completamente protegido. El espacio publicitario de la pantalla es un bien escaso cuando nuestra aplicación se ejecuta a resoluciones más bajas, como 1024 * 768, por lo que solo nos gustaría mostrar el reloj cuando el navegador esté completamente protegido si es posible. –
¿Qué sucede si normalmente no tienen un reloj en su escritorio, y tampoco usan su navegador de pantalla completa? ¿Estás seguro de que eres el responsable de que ellos sepan la hora actual? –